recherche

Maison  >  Questions et réponses  >  le corps du texte

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

我目前是点击按钮 弹出 弹出层 后给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);
PHP中文网PHP中文网2775 Il y a quelques jours377

répondre à tous(3)je répondrai

  • PHP中文网

    PHP中文网2017-04-11 11:31:57

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

    répondre
    0
  • 巴扎黑

    巴扎黑2017-04-11 11:31:57

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

    répondre
    0
  • ringa_lee

    ringa_lee2017-04-11 11:31:57

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

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

    répondre
    0
  • Annulerrépondre