zoukankan      html  css  js  c++  java
  • 遮罩层实现方式一

    <!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;
                     100%;
                    background: #666;
                    
                    position: fixed;
                    top: 0;
                    left: 0;
                    
                    opacity: 0.6;
                    z-index: 100;
                    
                    display: none;
                }
                
                #loginPage{
                     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;
                     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>
  • 相关阅读:
    LeetCode 258 Add Digits
    LeetCode 231 Power of Two
    LeetCode 28 Implement strStr()
    LeetCode 26 Remove Duplicates from Sorted Array
    LeetCode 21 Merge Two Sorted Lists
    LeetCode 20 Valid Parentheses
    图形处理函数库 ImageTTFBBox
    php一些函数
    func_get_arg(),func_get_args()和func_num_args()的用法
    人生不是故事,人生是世故,摸爬滚打才不会辜负功名尘土
  • 原文地址:https://www.cnblogs.com/menglong1214/p/9561309.html
Copyright © 2011-2022 走看看