javascript - 如何在显示通知 DIV 时将 "dim"网页的其余部分？

Question

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

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

是否有一种相当简单的方法来做到这一点？

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

这是我在网络上其他地方找到的功能示例(尽管在本例中对话框是弹出式 JS 对话框，而不是 DIV):

Answer 1

你可以使用这个 CSS:

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

Working Example

在上面的例子中，这个位创建了覆盖:

// 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 的覆盖元素上。