JS来添加弹出层，并且完成锁屏

上图 JS来添加弹出层，并且完成锁屏
<html>

<head>

    <title>弹出层</title>

    <style type="text/css">

        *{

            padding:0px;

            margin:0px;

        }

        .up{

            width:500px;

            height: 400px;

            border:1px solid silver;

            position: absolute;

            display: none;

            z-index: ;

            background:#fff;

/*            top:50%;

            left: 50%;*/

/*            margin-left: -250px;

            margin-top: -200px;*/

        }

        .up h2{

            background-color: #f2f2f2;

            text-align: center;

        }

        .con span{

            width:20px;

            height:30px;

            text-align: center;

            line-height: 30px;

            background-color:red;

            cursor: pointer;

        }

        .mask{

            width:3000px;

            height: 3000px;

            background:#;

            opacity: 0.3;

            position: absolute;

            top:;

            left: ;

            z-index: ;

            display:none;

        }

    </style>

</head>

<body>

    <div class="con">

        <span id="open">打开弹出层</span>

    </div>

    <div class="up" id="up">

            <h2>弹出层效果</h2>

            <span id="close">关闭</span>

    </div>

    <img src="a.jpg">

</body>

<script type="text/javascript">

//两种方式实现div居中：1：用css方式：top：50%，left：50%； margin-let:-divwidth/2 margin-top:divheight/2; 2:用js实现：获取窗口的高宽，top=（屏幕高-div高）/2,为了随时的监听浏览器的改变，需要用到浏览器事件

    window.onload=function(){

        function $(id){

            return document.getElementById(id);

        }

        //将div的位置封装在一个函数内部，直接调用

        function myDiv(){

            var mTop=(document.documentElement.clientHeight-)/;

            var mleft=(document.documentElement.clientWidth-)/;

            $("up").style.top=mTop+"px";

            $("up").style.left=mleft+"px";

        }

         myDiv();

         $("open").onclick=function(){

             $("up").style.display="block";

             mask.style.display="block";

         }

          $("close").onclick=function(){

             $("up").style.display="none";

             mask.style.display="none"

         }

         //创建一个DIV

         var mask=document.createElement("div");

         // //给这个DIV一个id和class属性

         // mask.id="mask";

         mask.className="mask";

         mask.style.width=document.documentElement.clientWidth;

         mask.style.height=document.documentElement.clientHeight;

         //将这个DIV放置到body里面--》一般是：父节点.appendChild(子节点)

         //这里注意的是absolute，要设置top和left；

         document.body.appendChild(mask); 

        //屏幕改变大小的时候，div不会自动的改变，需要添加窗口改变事件

        window.onresize=function(){

             myDiv();

             mask.style.width=document.documentElement.clientWidth;

             mask.style.height=document.documentElement.clientHeight;

        }

    }

</script>

</html>