js學(xué)習(xí)案例：蒙版效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        width: 100%;
        height: 3000px;
    }

    #barrier {
        width: 100%;
        height: 100%;
        background-color: black;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.2;
        display: none;
    }

    #login {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        border-radius: 15px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }
</style>

<body>
    <button id="btn">立即登錄</button>
    <div id="barrier"></div>
    <div id="login"></div>

    <script>
        window.addEventListener("load", function () {

            // 監(jiān)聽按鈕的點擊
            var barrier = document.getElementById("barrier");
            var login = document.getElementById("login");
            var btn = document.getElementById("btn");
            btn.addEventListener("click", function () {
                // 阻止冒泡兼容性寫法
                if (event && event.stopPropagation) {
                    // w3c標(biāo)準(zhǔn)
                    event.stopPropagation();
                } else {
                    // IE系列 IE 678
                    event.cancelBubble = true;
                }
                // 顯示
                barrier.style.display = "block";
                login.style.display = "block";
                // 隱藏滾動條
                document.body.style.overflow = "hidden";

                // 點擊文檔
                document.addEventListener("click", function (e) {
                    var e = e || window.event;
                    // 獲取點擊的文檔
                    var targetId = e.target ? e.target.id : e.srcElement.id;
                    // 判斷
                    if (targetId !== "login") {
                        barrier.style.display = "none";
                        login.style.display = "none";
                        document.body.style.overflow = "";
                    } else {
                        window.location.;
                    }
                });
            });
        });
    </script>
</body>

</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者