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;
}

如果您想将对话框div对齐在屏幕中央，则只需要包装器。

Demo in jsFiddle

Answer 2

为背景创建一个单独的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>

div的警报昏暗的屏幕

2 个答案:

Demo in jsFiddle