码迷,mamicode.com
首页 > 其他好文 > 详细

弹出层

时间:2017-09-30 10:04:46      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:logs   function   gre   func   move   set   fixed   inpu   padding   

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <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>
        <script src="js/sweetalert2.min.js"></script>
        <link rel="stylesheet" href="css/sweetalert2.min.css" />
    </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";
    }

    swal(
        1,
        2,
        success
    )
</script>

 

弹出层

标签:logs   function   gre   func   move   set   fixed   inpu   padding   

原文地址:http://www.cnblogs.com/yangchuanqi/p/7613252.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!