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>

自己再打几次　　巩固一下

posted @ 2017-09-29 22:43  sistrong  阅读(120)  评论(0)    收藏  举报