我如何“昏暗”显示通知时的网页的其余部分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屋！