zoukankan      html  css  js  c++  java
  • 遮罩层程序

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                * {
                    margin: 0px;
                    padding: 0px;
                }
                
                .login {
                    width: 100px;
                    height: 30px;
                    font-size: 25px;
                    line-height: 30px;
                    border: 1px solid black;
                    text-align: center;
                    background-color: darkcyan;
                    color: white;
                }
                
                .login:hover {
                    cursor: pointer;
                    background-color: greenyellow;
                }
                
                .mask {
                    width: 100%;
                    background-color: black;
                    opacity: 0.5;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    z-index: 90;
                }
                
                .log-div {
                    width: 500px;
                    height: 300px;
                    background-color: white;
                    position: fixed;
                    /*top: 30%;*/
                    /*left: 30%;*/
                    z-index: 99;
                }
            </style>
        </head>
    
        <body>
            <div class="mask" hidden></div>
            <div class="log-div" hidden="hidden"></div>
            <div class="login">登 录</div>
            <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>
        </body>
    
    </html>
    <script>
        var mask = document.getElementsByClassName("mask")[0];
        var login = document.getElementsByClassName("log-div")[0];
        var btn = document.getElementsByClassName("login")[0];
    
        var clientWidth = document.body.clientWidth;
        var clientHeight = document.documentElement.clientHeight;
    
        login.style.left = clientWidth / 2 - 250 + "px";
        login.style.top = clientHeight / 2 - 150 + "px";
        
        mask.style.height = document.body.clientHeight + "px";
    
        window.onresize = function() {
            var clientWidth = document.body.clientWidth;
            var clientHeight = document.documentElement.clientHeight;
    
            login.style.left = clientWidth / 2 - 250 + "px";
            login.style.top = clientHeight / 2 - 150 + "px";
        }
        
        btn.onclick = function(){
            mask.removeAttribute("hidden");
            login.removeAttribute("hidden");
        }
        
        mask.onclick = function(){
            mask.setAttribute("hidden","");
            login.setAttribute("hidden","hidden");
        }
    </script>
  • 相关阅读:
    HDU1021 Fibonacci Again
    HDU 1016 素数环
    android studio快捷键备忘录
    如何避免app互相覆盖
    Button中小写字母全部都成大写的了
    android java.lang.IllegalStateException: System services not available to Activities before onCreate错误
    ButterKnife没有配置引发的血案
    requestWindowFeature的使用
    bitmap.setPixel抛出了IllegalStateException 异常
    《程序员面试金典》部分题解
  • 原文地址:https://www.cnblogs.com/sunbo123/p/7357669.html
Copyright © 2011-2022 走看看