首页 > 代码库 > 遮罩层

遮罩层

2024-10-04 06:07:40   219人阅读

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            #mask {
                width: 100%;
                /*height: 500px;*/
                background-color: black;
                opacity: 0.5;
                position: fixed;
                top: 0px;
                left: 0px;
                z-index: 990;
            }
            
            #login {
                width: 300px;
                height: 200px;
                position: fixed;
                /*top: 50px;
                left: 200px;*/
                background-color: royalblue;
                z-index: 999;
            }
            
            #login-close {
                width: 50px;
                height: 50px;
                position: absolute;
                top: 10px;
                right: 10px;
                background-color: red;
            }
        </style>
        <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css/sweetalert2.min.css" />
        <script src=http://www.mamicode.com/"js/sweetalert2.min.js"></script>
    </head>

    <body>
        <input type="button" value=http://www.mamicode.com/"登录/注册" onclick="loginShow()" />
        <input type="button" value=http://www.mamicode.com/"OOOOO" id="btn-test" />
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <!--<div id="mask"></div>
        <div id="login">
            <div id="login-close"></div>
        </div>-->
    </body>

</html>
<script>
    //    alert(document.documentElement.clientHeight);
    function loginShow() {
        var mask = document.createElement("div");
        mask.id = "mask";
        mask.style.height = document.body.clientHeight + "px";
        mask.onclick = function() {
            close(mask);
            close(login);
            //            alert(this);
        }
        document.body.appendChild(mask);
        //        alert(this);

        var login = document.createElement("div");
        login.id = "login";
        var height = document.documentElement.clientHeight;
        var width = document.documentElement.clientWidth;
        login.style.top = height / 2 - 100 + "px";
        login.style.left = width / 2 - 150 + "px";

        var login_close = document.createElement("div");
        login_close.id = "login-close";
        login_close.onclick = function() {
            close(mask);
            close(login);
        }
        login.appendChild(login_close);

        document.body.appendChild(login);
    }

    function close(x) {
        document.body.removeChild(x);
    }

    window.onresize = function() {
        var login_re = document.getElementById("login");
        var height = document.documentElement.clientHeight;
        var width = document.documentElement.clientWidth;

        login_re.style.top = height / 2 - 100 + "px";
        login_re.style.left = width / 2 - 150 + "px";
    }

    document.getElementById("btn-test").onclick = function() {
        swal(
            ‘成功！‘,
            ‘你成功了！‘,
            ‘success‘
        )
    }
</script>

 

遮罩层


联系
我们