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

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-p {
    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;
}

(function (w) {
    function hasClass( elements,cName ){  
        return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); 
    }  
    function addClass( elements,cName ){  
        if( !hasClass( elements,cName ) ){  
            elements.className += " " + cName;  
        };  
    }  
    function removeClass( elements,cName ){  
        if( hasClass( elements,cName ) ){  
            elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
        };  
    }

    function createDom (father, self) {
        let self_dom = document.createElement(self);
        father.appendChild(self_dom);

        return self_dom;
    }

    function proup (msg="are you sure?", reply1="cancel", reply2="ok") {
        let body = document.body;
        addClass(body, 'mask');

        let pop_p = createDom(body, 'p');
        addClass(pop_p, 'proup-p');

        let pop_title = createDom(pop_p, 'h3');
        addClass(pop_title, 'proup-title');
        pop_title.innerHTML = msg;

    }

    w.proup = proup;
})(window);

Answer 1

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

Answer 2

设置遮罩层的zindex小于弹出层的zindex啊

Answer 3

HTML代码：
加个<p id="test"></p>
JS代码：
加个

let t = document.getElementById("test");
        addClass(t,"m");

CSS代码：
加个：

html,body{
    width: 100%;
    height: 100%;
}
.m{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(200,200,0,0.3);
    background-attachment: fixed;
}

能解决你的问题，但是我知道，这个答案属于强答。