JS 实现点击空白隐藏内容

蔚落 2023-07-04 14:16 6阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>点击空白隐藏内容</title>
        <style>
            body {
                height: 2000px;
            }
            .mask {
                width: 100%;
                height: 100%;
                opacity: 0.4;   /*半透明*/
                filter: alpha(opacity = 40);  /*ie 6半透明*/
                background-color: black;
                position: fixed;
                top: 0;
                left: 0;
                display: none;
            }
            .show {
                width: 300px;
                height: 300px;
                background-color: #fff;
                position: fixed;
                left: 50%;
                top: 50%;
                margin: -150px 0 0 -150px;
                display: none;
            }
        </style>
    </head>
    <body>
    
    <a href="javascript:;" >注册</a>
    <a href="javascript:;" id="login">登录</a>
    <div class="mask" id="mask"></div>
    <div class="show" id="show"></div>
    </body>
    </html>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
    
        var login = document.getElementById("login");
        login.onclick = function (event) {
            $("mask").style.display = "block";
            $("show").style.display = "block";
            document.body.style.overflow = "hidden";
            /*阻止冒泡*/
            var event = event || window.event;
            if (event && event.stopPropagation()) {
                event.stopPropagation();
            }else {
                event.cancelBubble = true;
            }
        }
        document.onclick = function (event) {
            var event = event || window.event;
            var targetId = event.target ? event.target.id : event.srcElement.id;
            if (targetId != "show") {
                $("mask").style.display = "none";
                $("show").style.display = "none";
                document.body.style.overflow = "visible";
            }
        }
    </script>