弹出层

Posted 2020-10-09 我勒个去YCQ

tags:

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

<!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>

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

求html代码，点击按钮弹出层，再次点击关闭层？