html - div 警报时屏幕变暗

Question

当弹出警告框触发时，我有以下 html div 和 css。我想让它周围的其余屏幕变暗，但 CSS 不起作用。

我们可以仅使用 css 使聚焦的 div 周围的屏幕变暗吗？

.dim {
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:1 !important;
    background-color:black;
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75;      /* khtml, old safari */
      -moz-opacity: 0.75;      /* mozilla, netscape */
           opacity: 0.75;      /* fx, safari, opera */
}

<div class="dim" id="dialog" title="Event">
  <p>
      This is the default dialog which is useful for displaying information. 
      The dialog window can be moved, resized and closed with the 'x' icon.
  </p>
</div>

Answer 1

不完全理解您的问题，但我认为您正在寻找一种简单的“灯箱”效果。

您需要两个单独的 DIV。第一个看起来与上面的 CSS 代码相似，并覆盖了正常的网站。第二个 DIV 用于您的消息(或内容)。诀窍是，第二个 div 的 z-index 高于 overlay-div 的 z-index。

HTML:

<p>Normal Website content</p>
<p>Normal Website content</p>
<p>Normal Website content</p>
<p>Normal Website content</p>
<p>Normal Website content</p>
<p>Normal Website content</p>

<!-- The first DIV for creating an Overlay -->
<div class="dim"  title="Event">
</div>  

<!-- The second div. Note, that the wrapper is only need to center the real dialog div -->
<div class="dialog_wrapper">
    <div class="dialog">Dialog Window</div>
</div>

CSS:

.dim {
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:1 !important;
    background-color:black;
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75;      /* khtml, old safari */
      -moz-opacity: 0.75;      /* mozilla, netscape */
           opacity: 0.75;      /* fx, safari, opera */
}
.dialog_wrapper {
    width: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 5;
    display: block;
}
.dialog {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    padding: 40px;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
}

Wrapper 仅在您想要将 dialog-div 对齐到屏幕中央时才需要。

Demo in jsFiddle