遮罩层实现方式一 

<!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;
                
                display: none;
            }
            
            #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;
                
                display: none;
            }
            
            #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);
        var mask = getId('mask');
        var loginPage = getId('loginPage');
        var close = getId('close');
        
//        console.log(login)
        
        //登录按钮的点击事件
        login.addEventListener('click',showLogin);
        
        function showLogin(){
            mask.style.display = "block"
            loginPage.style.display = "block"
        }
        
        
        
        //X的事件
        close.addEventListener('click',closeLogin);
        
        function closeLogin(){
            mask.style.display = "none"
            loginPage.style.display = "none"
        }
        
        
        //点击遮罩层关闭登陆框
        mask.addEventListener('click',closeLogin);
        
        //通过函数封装通过id获取元素
        function getId(id){
            return document.getElementById(id);
        }
    </script>
</html>

 

posted @ 2018-08-30 17:05  乱了夏天蓝了海  阅读(240)  评论(0)  编辑  收藏  举报