遮罩层实现方式二

Posted 2021-01-02 menglong1214

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了遮罩层实现方式二相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #login-register span{
                display: inline-block;
                padding: 6px 10px;
                background: #E3E3E3;
                cursor: pointer;
            }
            
            #mask{
                height: 2000px;
                width: 100%;
                background: #666;
                
                position: fixed;
                top: 0;
                left: 0;
                
                opacity: 0.6;
                z-index: 100;
            }
            
            #loginPage{
                width: 430px;
                height: 295px;
                background: url(img/TencentLogin.png) no-repeat;
                
                
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                z-index: 1000;
            }
            
            #close{
                float: right;
                height: 30px;
                width: 30px;
                margin: 10px 10px 0 0;
                background: url(img/close.png) no-repeat;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="login-register">
            <span id="login">登录</span>
            <span id="register">注册</span>
        </div>
        <!--遮罩层-->
        <!--<div id="mask">
            
        </div>-->
        <!--登录页面-->
        <!--<div id="loginPage">
            <span id="close"></span>
        </div>-->
    </body>
    <script type="text/javascript">
        var login = getId("login");
        var register = getId(register);

        //登录按钮的点击事件
        login.addEventListener(‘click‘,showLogin);
        
        function showLogin(){
            //创建遮罩层
            var mask = document.createElement(‘div‘);
            //给遮罩层设置id
            mask.id = "mask";
            //设置遮罩层的大小
            var mh = screen.height + "px";
            var mw = screen.width + "px";//需要自己加单位，通过screen.width或screen.availWidth获取到的只是数值，并不带单位
//            alert(mh)
            mask.style.height = mh;
            mask.style.width = mw;
            
            //将遮罩层添加到页面中
            document.body.appendChild(mask);
            
            
            //创建登陆框
            var loginPage = document.createElement(‘div‘);
            loginPage.id = "loginPage";
            
            //创建X
            var close = document.createElement(‘span‘);
            close.id = "close";
            //将X添加到loginPage登陆框中
            loginPage.appendChild(close);
            
            document.body.appendChild(loginPage);
            
            //X的事件
            close.addEventListener(‘click‘,closeLogin);
            //点击遮罩层关闭登陆框
            mask.addEventListener(‘click‘,closeLogin);
            
            function closeLogin(){
                loginPage.style.display = "none";
                mask.style.display = "none";
            }
        
        }
        
        //通过函数封装通过id获取元素
        function getId(id){
            return document.getElementById(id);
        }
    </script>
</html>

以上是关于遮罩层实现方式二的主要内容，如果未能解决你的问题，请参考以下文章