div的警报昏暗的屏幕

时间:2013-03-27 19:33:23

标签: html css css3

当弹出警告框时,我有以下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>

2 个答案:

答案 0 :(得分: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

答案 1 :(得分: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>