• 遮罩层


    <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>
  • 相关阅读:
    1.23学习总结:文件流
    vue-router重写push方法,解决相同路径跳转报错,解决点击菜单栏打开外部链接
    手把手教Electron+vue,打包vue项目,打包成桌面程序。
    后台获取的map集合封装json
    VUE同级组件之前方法调用
    字节跳动今日头条-抖音小程序序html富文本显示解决办法
    别总写代码,这130个网站比涨工资都重要
    vue 组件之间的自定义方法互相调用
    swiper轮播图出现疯狂抖动(小程序)
    vue通过地址下载文件
  • 原文地址:https://www.cnblogs.com/yunpeng521/p/7047393.html
Copyright © 2020-2023  润新知