Maison > Questions et réponses > le corps du texte
我目前是点击按钮 弹出 弹出层 后给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中文网2017-04-11 11:31:57
一般遮罩层要添加一个fixed定位的p,把它的left,right,top,bottom都设为0,它就会铺满当前屏幕,设置透明背景色,然后控制它的display就可以了。
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;
}
能解决你的问题,但是我知道,这个答案属于强答。