9.29特效 弹出层~

Posted sistrong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了9.29特效 弹出层~相关的知识,希望对你有一定的参考价值。

<title></title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            .mask {
                width: 100%;
                height: 500px;
                background-color: black;
                opacity: 0.5;
                position: fixed;
                top: 0px;
                left: 0px;
                z-index: 400;
            }
            
            .out {
                width: 300px;
                height: 200px;
                background-color: green;
                position: fixed;
                /*top: 100px;
                left: 100px;*/
                z-index: 998;
            }
        </style>
        
        
    </head>

    <body>
        <input type="button" value="弹出" id="btn1" />
        <div class="mask" hidden="hidden"></div>
        <div class="out" hidden="hidden"></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>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
    </body>

</html>
<script>
    var mask = document.getElementsByClassName("mask")[0];
    var out = document.getElementsByClassName("out")[0];
    var btn1 = document.getElementById("btn1");
    var c_height = document.documentElement.clientHeight;
    var c_width = document.documentElement.clientWidth;
    var top_ = c_height / 2 - 100;
    var left = c_width / 2 - 150;

    mask.style.height = c_height + "px";
    out.style.top = top_ + "px";
    out.style.left = left + "px";

    btn1.onclick = function() {
        mask.removeAttribute("hidden");
        out.removeAttribute("hidden");
    }
    mask.onclick = function() {
        mask.setAttribute("hidden", "hidden");
        out.setAttribute("hidden", "hidden");
    }

    window.onresize = function() {
        var c_height = document.documentElement.clientHeight;
        var c_width = document.documentElement.clientWidth;
        var top_ = c_height / 2 - 100;
        var left = c_width / 2 - 150;

        mask.style.height = c_height + "px";
        out.style.top = top_ + "px";
        out.style.left = left + "px";
    }

    
</script>

自己再打几次  巩固一下

以上是关于9.29特效 弹出层~的主要内容,如果未能解决你的问题,请参考以下文章

点击按钮弹出一个div层

LAYUI弹出层详解

几款web开发常用jquery特效代码

Layui表格及弹出层显示表格

js弹出层代码

求html代码,点击按钮弹出层,再次点击关闭层?