Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            padding:0;
            margin: 0;
            font-size: 14px;
            width: 100%;
            height: 100%;
            overflow: hidden;/*不出现滚动条*/
        }
        input{
            display: block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin:20px auto;
        }
        #bg{
            width: 100%;
            height:100%;
            position:absolute;
            left:0;
            top:0;
            z-index: 1;
            background-color:rgba(0,0,0,0.5);
        }
        #layer{
            width: 300px;
            height: 300px;
            border:1px solid #ccc;
            background-color: #fff;
            position: absolute;
            z-index:2;
            border-radius:50px 150px;
            background: repeating-radial-gradient(#ff0,green);
        }
    </style>
</head>
<body>
<input type="button" value="login" id="btn"/>
<script>

    var btn=document.getElementById("btn");
    //获取当前屏幕的宽和高
    var cw=document.body.clientWidth||document.documentElement.clientWidth;
    var ch=document.body.clientHeight||document.documentElement.clientHeight;
    //绑定点击事件
    btn.onclick=function(){
        //动态的创建弹出层
        var bg=document.createElement("div");
        bg.id="bg";
        var layer=document.createElement("div");
        layer.id="layer";
        //动态的添加元素到页面中
        document.body.appendChild(bg);
        document.body.appendChild(layer);
        var x=(cw-layer.offsetWidth)/2;
        var y=(ch-layer.offsetHeight)/2;
        layer.style.left=x+"px";
        layer.style.top=y+"px";
        bg.onclick=function(){
            document.body.removeChild(this);
            document.body.removeChild(layer);
        }
    };
</script>
</body>
</html>