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

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的覆盖元素上添加对话框。

Answer 2

这是一个应该展示基础知识的公平simple lightbox example。它使用jQuery，但如果需要，可以很容易地展开到vanilla javascript中。

基本概念是你有一个占用整个显示区域（.overlay）的div，它是一个半透明的黑色，然后是另一个位于前面的div（{ {1}}）这将是对话框的内容。

Answer 3

最好使用jquery插件或现有的灯箱库，如上一个答案或http://defunkt.io/facebox/或http://jacklmoore.com/colorbox/

如果您仍想使用CSS ..通常看起来像

 #overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

“不透明度”规则负责“暗淡”，其他规则负责使不透明度应用于覆盖整个页面的元素。