Change opacity body without changing popup-CodePudding

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

CodePudding user response：

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