javascript 显示通知 DIV 时如何“变暗”网页的其余部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9455556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I "dim" the rest of the web page when displaying a notification DIV?
提问by DVK
In my web app, I'm displaying a "notification" DIV.
在我的网络应用程序中，我显示了一个“通知”DIV。
I would like to "dim" the rest of the page, so that the notification DIV stands out even more when displayed.
我想“变暗”页面的其余部分，以便通知 DIV 在显示时更加突出。
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):
这是我在网络上其他地方找到的功能示例（尽管在这种情况下，对话框是弹出式 JS 对话框，而不是 DIV）：
回答by Sarfraz
You can use this CSS:
你可以使用这个 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.
然后将对话框添加到具有更高的覆盖元素上z-index。
回答by J. Holmes
Here is a fairly simple lightbox examplethat should demonstrate the basics. It uses jQuery, but could easily be unrolled into vanilla javascript if need be.
这是一个相当简单的灯箱示例，它应该展示基础知识。它使用 jQuery，但如果需要，可以很容易地展开到 vanilla javascript 中。
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 frontof that (.modal) which would be the content of your dialog box.
基本概念是你有一个 div 占据整个显示区域 ( .overlay)，它是一个半透明的黑色，然后另一个 div位于那个 ( .modal)前面，这将是对话框的内容。
回答by Rishav Rastogi
Its better to use a jquery plugin or already existing lightbox library, like in the previous answer or http://defunkt.io/facebox/or http://Hymanlmoore.com/colorbox/
最好使用 jquery 插件或已经存在的灯箱库，就像在上一个答案或 http://defunkt.io/facebox/或http://Hymanlmoore.com/colorbox/ 中一样
If your still want to use the CSS.. generally it looks like
如果您仍然想使用 CSS .. 通常看起来像
#overlay {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
The "opacity" rule is responsible for the "dimness", the other rules are responsible for making the opacity is applied to an element the covers the whole page.
“opacity”规则负责“dimness”，其他规则负责使不透明度应用于覆盖整个页面的元素。
