ロックされた背景の画像にフォーカスする

Question

Facebookに画像が表示され、残りの画像はロックされた灰色（ ）になり、その画像を閉じるまで何もできません。その背後にある論理は何ですか？ CSSの一部として非表示にする必要があるオブジェクトですか？ jQueryでコードラインを組み込んでいますか？ この物を扱うための適切かつ許容される方法は何ですか？

私はそれがjQueryだと知っていますが、アイデアの周りに私の頭を包むことはできません。

Answer 1

あなたはthickboxまたはlightbox plugin for jQueryとother lightboxとthickbox projectsをチェックする必要があります。

jQuery UIフレームワークのdialog componentを見てください。他のモーダルダイアログ（ページ上に描画することができます）をご覧ください。

デモページを見て、ブラウザに組み込まれている開発ツールを使用すると、その動作を確認できます。以下のCSSで

<div id="TB_overlay" class="TB_overlayBG"></div> 

：例えばThickBoxのは、ページ全体を無効にするには、オーバーレイdiv要素を持っている

#TB_overlay { 
    position: fixed; 
    z-index: 100; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
} 

あなたが見ることができるように、ものが上になるように100のzインデックスを持っています残りの部分は全ページに渡っています。

#TB_window { 
    position: fixed; 
    z-index: 102; 
    top: 50%; 
    left: 50%; 
    ... 
} 

Answer 2

私はあなたがlightbox効果を意味すると仮定：

は、第二オーバーレイウィンドウ上記オーバーレイの前にあるように、102のz屈折率と中心

<div id="TB_window" ...></div> 

にあります。

これは、多くの場合、オーバーレイを行うのは、body要素に絶対positionned比べ、幅100％の幅と高さのdiv：このオーバーレイ内部

div.overlay { 
position : absolute; 
top : 0; 
left : 0; 
width : 100%; 
height : 100%; 
} 

を、あなたは一例ごとに、あなたのイメージを置く：

div.overlay img { 
position : absolute; 
top : 50%; 
left : 50%; 
margin-left : /* negative half the width of your image */ 
margin-top: /* negative half the height of your image */ 
} 

これは多くの方法のうちの1つに過ぎません（イメージの寸法を知っている場合にのみ動作します）。中心合わせは、JavaScriptを使用して計算されることがよくあります。

ライトボックスを検索すると、たくさんのJqueryプラグインとチュートリアルが見つかります。