• 遮罩层


    <style>
                * {
                    margin: 0px;
                    padding: 0px;
                }
                
                #mask {
                     100%;
                    /*height: 500px;*/
                    background-color: black;
                    opacity: 0.5;
                    position: fixed;
                    top: 0px;
                    left: 0px;
                    z-index: 990;
                }
                
                #login {
                     300px;
                    height: 200px;
                    position: fixed;
                    /*top: 50px;
                    left: 200px;*/
                    background-color: royalblue;
                    z-index: 999;
                }
                
                #login-close {
                     50px;
                    height: 50px;
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    background-color: red;
                }
            </style>
            <link rel="stylesheet" type="text/css" href="css/sweetalert2.min.css" />
            <script src="js/sweetalert2.min.js"></script>
        </head>
    
        <body>
            <input type="button" value="登录/注册" onclick="loginShow()" />
            <input type="button" value="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>
  • 相关阅读:
    ssh REMOTE HOST IDENTIFICATION HAS CHANGED!
    pipenv+sublime text3 配置
    华硕N55SF 折腾记
    vscode 的tab与空格设置
    kbenigne学习3 get-started 2创建实体
    设置数据编码
    jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
    jquery与其他js冲突
    php取整
    IE8 indexOf
  • 原文地址:https://www.cnblogs.com/yunpeng521/p/7047393.html
Copyright © 2020-2023  润新知