显示通知 DIV 时如何“调暗”网页的其余部分？

在我的网络应用程序中，我显示了一个“通知”DIV。

我想“调暗”页面的其余部分，以便通知 DIV 在显示时更加突出。

有没有一种相当简单的方法可以做到这一点？

这个问题只涉及视觉效果，而不涉及页面其余部分的功能。

下面是我在网络其他地方找到的功能示例（尽管在本例中该对话框是弹出式 JS 对话框，而不是 DIV）：

你可以使用这个CSS：

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

工作示例

在上面的示例中，该位创建覆盖：

// 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);

然后将对话框添加到具有更高值的覆盖元素上z-index.