我如何“昏暗”显示通知时的网页的其余部分DIV? [英] How can I "dim" the rest of the web page when displaying a notification DIV?
问题描述
在我的网络应用程序中,我显示一个通知DIV。
我想调暗页面的其余部分,
这个问题是否有很简单的方法?
这里是我在网上其他地方发现的功能的一个例子(虽然在这种情况下对话框是一个弹出的JS,而不是一个DIV):
您可以使用此CSS:
#overlay {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
opacity:0.6; / *请参阅下面的跨浏览器不透明度* /
}
工作示例
在上面的示例中,此位创建覆盖:
//主要覆盖容器
$('< div id =__ msg_overlay>')。css({
width:100%
,height:100%
,background:#000
,position:fixed ,top:0
,left:0
,zIndex:50
,MsFilter:progid:DXImageTransform.Microsoft.Alpha不透明度= 60)
,filter:alpha(opacity = 60)
,MozOpacity:0.6
,KhtmlOpacity:0.6
, :0.6
})。appendTo(document.body);
然后在该覆盖元素上添加更高的 z-index
。
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):
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
.
这篇关于我如何“昏暗”显示通知时的网页的其余部分DIV?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!