如何给弹出层以外的所有区域增加遮罩层（带透明和背景色），但是弹出层不受影响

Question

我目前是点击按钮 弹出 弹出层 后给body增加背景色和透明0.5 但是这样就会影响 弹出层自身了，应该怎么解决呢？

    <p style="background-color: orange">test...</p>
    <input type="button" value="点击，出现弹窗" id="btn-proup"/>
    <script type="text/javascript">
        let btn_proup = document.getElementById('btn-proup');
        btn_proup.addEventListener('click', function () {
            proup('你确定要关闭吗?', 'Yes.', 'No.');
        });    </script>

.proup-div {    width: 100px;    height: 100px;    position: absolute;    background-color: #fff;    top: 50%;    left: 50%;    border-radius: 5px;    transform: translate(-50%,-50%);    border: 2px solid red;
}.proup-title {    position: absolute;    color: blue;
}.mask {    opacity: 0.3;    z-index: 11;    background-color: #bbb;
}

Answer 1

一般遮罩层要添加一个fixed定位的div，把它的left，right,top,bottom都设为0，它就会铺满当前屏幕，设置透明背景色，然后控制它的display就可以了。