I'm using JQuery to change opacity of the page after a certain delay. Problem is, my popup heritate this opacity too.
How can I apply it on the entire page without my div #popup-news ?
content.html :
<div id="popup-news">
[...]
</div>
style.css :
#popup-news {
width: 45%;
position: fixed;
left: 50%;
transform: translateX(-50%);
padding-top: 10px;
padding-bottom: 40px;
display: none;
background-color: white;
border: 1px solid #d6d8dc;
z-index: 99;
}
js file :
setTimeout(function(){
$('#popup-news').css('display', 'block');
}, 30000);
if($('#popup-news').css('display') == 'none'){
$('body').css('opacity', '0.2');
}
Changing body’s opacity without affecting one of its child elements is not possible.
One solution to the problem is putting everything else on the page in an element that’s a sibling to the pop-up and changing the opacity of that element instead of body:
<div id="main">
the rest of the body’s content
</div>
<div id="popup-news">
[...]
</div>
JS:
…
if($('#popup-news').css('display') == 'none'){
$('#main').css('opacity', '0.2');
}