码迷,mamicode.com
首页 > 其他好文 > 详细

遮罩层实现方式一

时间:2018-08-30 18:28:30      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:登陆   htm   body   mask   transform   block   nsf   margin   ret   

<!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>

 

遮罩层实现方式一

标签:登陆   htm   body   mask   transform   block   nsf   margin   ret   

原文地址:https://www.cnblogs.com/menglong1214/p/9561309.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!