How can I "dim" the rest of the web page when displaying a notification DIV?

Question

In my web app, I'm displaying a "notification" DIV.

I would like to "dim" the rest of the page, so that the notification DIV stands out even more when displayed.

Is there a reasonably easy way of doing so?

This question is only concerned with visual effects, NOT the functionality of the rest of the page.

Here is an example of the functionality I found elsewhere on the web (though in this case the dialog was a pop-up JS one, and not a DIV):

Answer 1

You can use this CSS:

#overlay{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0.6; /* see below for cross-browser opacity */
}

Working Example

In the example above, this bit creates overlay:

// main overlay container
$('<div id="__msg_overlay">').css({
      "width" : "100%"
    , "height" : "100%"
    , "background" : "#000"
    , "position" : "fixed"
    , "top" : "0"
    , "left" : "0"
    , "zIndex" : "50"
    , "MsFilter" : "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"
    , "filter" : "alpha(opacity=60)"
    , "MozOpacity" : 0.6
    , "KhtmlOpacity" : 0.6
    , "opacity" : 0.6

}).appendTo(document.body);

Dialog box is then added on that overlay element with higher z-index.

Answer 2

Here is a fairly simple lightbox example that should demonstrate the basics. It uses jQuery, but could easily be unrolled into vanilla javascript if need be.

The basic concept is you have a div that takes up the entire display area (.overlay) that is a semitransparent black and then another div that is positioned in front of that (.modal) which would be the content of your dialog box.