Change opacity body without changing popup

Question

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

Make the rest of the page and the pop-up as siblings. There's no way you could remove the opacity from the nested elements, when their parent is transparent. — Teemu, Mar 10 '22 at 08:52
Related existing questions: [set opacity of background image](https://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements) / [Apply opacity with affecting child element](https://stackoverflow.com/questions/10021302/how-to-apply-an-opacity-without-affecting-a-child-element-with-html-css) / [opacity on body except one div](https://stackoverflow.com/questions/29541011/css-opacity-on-entire-body-tag-except-on-one-div) — freedomn-m, Mar 10 '22 at 08:57

score 1 · Accepted Answer · answered Mar 10 '22 at 09:02

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

Change opacity body without changing popup

1 Answers1