CODEWITHSUNDEEP
javascripthtmljquerycss
user18170841
user18170841

Reputation:

Change opacity body without changing popup

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

Upvotes: 1

Views: 766

Answers (1)

clickbait
clickbait

Reputation: 2998

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

Upvotes: 1

Related Questions