Question

163

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

rated 0 times [ 168] [ 5] / answers: 1 / hits: 15246 / 13 Years ago, sun, february 26, 2012, 12:00:00

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):

enter

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaleyv

Add To Favorites

Follow

Total Points: 259

Total Questions: 99

Total Answers: 107

Location: Saint Helena

Member since Tue, Nov 3, 2020

4 Years ago

answered 13 Years ago sandra · Accepted Answer

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.