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

あなたの質問を正確に理解していませんが、単純な「ライトボックス」効果を探していると思います.

2 つの個別の DIV が必要です。最初のものは、上記の CSS コードに似ており、通常の Web サイトをオーバーレイします。2 番目の DIV は、メッセージ (またはコンテンツ) 用です。秘訣は、2 番目の 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;
}

ラッパーは、dialog-div を画面の中央に配置する場合にのみ必要です。

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 に答える