I have a news tab where whenever an user clicks it, the popup box shows up with the details, however I want the background or the body tag itself to dim so I wrote:

$("#read").click(function(){
    $("#pbox").fadeIn('slow');
    $("body").css({"opacity": "0.5"});
});

However the box itself dims either. Is there a way to make the box ignore this mand? Or maybe there is another way around?

I have a news tab where whenever an user clicks it, the popup box shows up with the details, however I want the background or the body tag itself to dim so I wrote:

$("#read").click(function(){
    $("#pbox").fadeIn('slow');
    $("body").css({"opacity": "0.5"});
});

However the box itself dims either. Is there a way to make the box ignore this mand? Or maybe there is another way around?

• javascript
• jquery
• css
• popup

• Opacity will be inherited by child elements when you use it like that. What else did you try? Perhaps add a jsfiddle to show what you've tried. – phenomnomnominal Commented Aug 6, 2012 at 10:09

2 Answers 2

As body contains the #pbox then the box itself will be subject to the 50% opacity you have applied. A better method would be to overlay a semi opaque div over your entire window, and then position #pbox above it, a little like so:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: none;
}

#pbox {
    z-index: 1;
}

So here you have the white #overlay div appearing over all your content with 50% opacity. Above it is #pbox with a z-index specified to ensure it appears on top.

The jQuery code would be a little like this:

$("#read").click(function(){
    $("#pbox").fadeIn('slow');
    $("#overlay").show().css({"opacity": "0.5"});
});

Unfortunately, there isn't. Since the popup is inside the body tag, it is included in the change in opacity.

The only way to do this would be to make an overlay layer which covers the entire body and is translucent, and then place your popup above that.