原生js点击页面空白部分关闭对话框的第二种写法

原理：在对话框出现的时候给上一个遮罩层，遮罩层可以设置为透明，点击遮罩层对话框关闭

    <!-- 按钮部分要放在遮罩层外面，因为有些网页会设置点击按钮的时候对话框关闭 -->
    <button class="button">点击退出</button>

    <div class="bigBox">
        <!-- cover是整个遮罩层,遮罩层和对话框在同一个大盒子中，都是绝对定位 -->
        <div class="cover"></div>
        <div class="box">我是传说中的对话框</div>
    </div>

下面是css部分，其实就是简单设置了一下定位和以及对话框，遮罩层的颜色，注意，遮罩层一般是透明色，我们可以看一下有些网页，当你登录框出现的时候，整个页面上的其他地方实际上不好操作的，这实际上是因为登录框自带的遮罩层

  <style>
        * {
            padding: 0;
            margin: 0;
        }

        .button {
            height: 5vh;
            width: 10vw;
        }

        .bigBox {
            position: relative;
        }

        .cover {
            position: absolute;
            /* 这个95实际上就是100-button的5 */
            display: none;
            height: 95vh;
            width: 100vw;
            background-color: black;
        }

        .box {
            position: absolute;
            display: none;
            background-color: blue;
            width: 200px;
            height: 100px;
        }
    </style>

接下来是页面逻辑部分，在点击遮罩层的时候，整个bigbox关闭

<script>
        let button = document.querySelector(".button")
        let box = document.querySelector(".box")
        let cover = document.querySelector(".cover")
        button.addEventListener('click', function () {
            box.style.display = 'block'
            cover.style.display = 'block'
        })
        // 点击遮罩层，box盒子实现消失
        cover.addEventListener("click", function (e) {
            if (e.target = cover) {
                box.style.display = 'none'
                cover.style.display = 'none'
            }
        })
    </script>

其实好久之前就想到了，但是一直没写，学习就是这样子的，很多时候写多了，以前困扰你的难题就会迎刃而解，相比之间的一种写法，这种写法是不是顺眼了很多。