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>
  • 相关阅读:
    (转)排序算法——归并排序与递归
    在serviceImpl里使用自身的方法
    hibernate manytoone中的lazy EAGER
    autowire异常的三个情况
    (转)js的call和apply
    mysql创建外键出错(注意数据库表字段排序)
    easyui datagrid
    ava.lang.NullPointerException的一般解决方法
    spring简单事务管理器
    关于使用注解出现BeanCreationException或者NameNotFoundException的解决方法
  • 原文地址:https://www.cnblogs.com/sunbo123/p/7357669.html
Copyright © 2011-2022 走看看