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

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

    
test...
    
    

.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);