1

当弹出警报框触发时，我有以下 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>
4

2 回答 2

2

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

您需要两个单独的 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;
}

仅当您想在屏幕中心对齐对话框 div 时才需要 Wrapper。

jsFiddle 中的演示

于 2013-03-27T19:49:48.593 回答
0

为背景创建一个单独的 div 并将 z-index 更改为 -1。

<div class="dim"></div>
<div 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>
于 2013-03-27T19:49:53.267 回答