弹出层

*{
                margin: 0px;
                padding: 0px;
            }
            .mask{
                 100%;
                /*height: 500px;*/
                background-color: gray;
                opacity: 0.5;
                z-index: 998;
                position: absolute;
                top: 0px;
                left: 0px;
            }
            .login{
                 400px;
                height: 300px;
                background-color: royalblue;
                position: fixed;
                /*left: 200px;
                top: 300px;*/
                z-index: 999;
            }
            .close-btn{
                 30px;
                height: 30px;
                position: absolute;
                right: 10px;
                top: 10px;
                background-color: aquamarine;
                text-align: center;
                line-height: 30px;
                font-size: 30px;
            }
            .close-btn:hover{
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <input type="button" value="登录" id="login" />
        <script>
            document.getElementById("login").onclick = function(){
                var x = "<div class='close-btn'>X</div>";
                showLogin(x);
            }
        </script>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <!--<div class="mask"></div>-->
        <!--<div class="login">
            <div class="close-btn">X</div>
        </div>-->
    </body>

</html>
<script>
    function showLogin(x){
        var bodyHeight = document.body.clientHeight;
        var clientHeight = document.documentElement.clientHeight;
        var clientWidth = document.documentElement.clientWidth;
        
        var mask = document.createElement("div");
        mask.className = "mask";
        mask.style.height = bodyHeight + "px";
        mask.onclick = function(){
            mask.remove();
            login.remove();
            };
        document.body.appendChild(mask);
        
        var login = document.createElement("div");
        login.className = "login";
        login.style.left = clientWidth/2 - 200 + "px";
        login.style.top = clientHeight/2 - 150 + "px";
        login.innerHTML = x;
        document.body.appendChild(login);
        
        document.getElementsByClassName("close-btn")[0].onclick = function(){
            mask.remove();
            login.remove();
        }
    }
    document.body.onresize = function(){
        var clientHeight = document.documentElement.clientHeight;
        var clientWidth = document.documentElement.clientWidth;
        var login = document.getElementsByClassName("login")[0];
        login.style.left = clientWidth/2 - 200 + "px";
        login.style.top = clientHeight/2 - 150 + "px";
    }
</script>
效果