javascript - javascript または css を使用して div を強調表示し、残りのコンテンツを灰色または影にする方法を教えてください。

Question

ページの色を調整したり、レイヤーを作成したり、z インデックスを使用してフォーカスされた div を前面に表示したりするのではなく、div がアクティブなボックスのように機能するのを確認しました。

ユーザーに表示したい div を除いて、ページ上のすべてをシャドーしたい。Facebook のように写真が前に表示されますが、背景に 50% の不透明度があるページを見ることができます。

Answer 1

ページ全体をカバーする要素を作成します。

<div id="modal"></div>

スタイル:

#modal {
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 100;
}

必要なときだけ表示します。次に、この上に必要な要素のクラスを作成します。

.overModal {
    position: relative;
    z-index: 200;
}

デモ: http://jsfiddle.net/jonathansampson/pVUHP/