自家製LightBox作成のポイント解説

サイト構築 CSS2.1 javascript

LightBoxのイメージ

つまり単純に言えば、ブラウザの上にposition:absolute指定のdivが二つ乗っているだけです。

LightBox背景


ここに書いてあるものはあくまでも初期設定です。
実は不可視にしてあるだけで存在しています。
ここではposition:fixになっていますが、この直後にabsoluteで上書きしますので気にせずそのままです。
高さ、幅に関しては１００％指定になっています。
個人的にはjsvascriptで設定したいところですが、heightとwidthでCSS上に設定してあればクロスブラウザ対応が不要になるのでこちらのほうが望ましいです。

あとは背景の色と透明度の指定です。

LightBox本体


こちらもほぼ同じです。
でですので省略します。

表示時のLightBoxの調整

  marginTop:"-"+$("#overLayer").height()/2+"px" , 
  marginLeft:"-"+$("#overLayer").width()/2+"px"

ここだけです。
これを日本語にまず直してみます。
marginTop:"-"+$("#overLayer").height()/2+"px" ⇒上部の余白を自分自身（overLayer）の半分の大きさにします
marginLeft:"-"+$("#overLayer").width()/2+"px" ⇒左の余白を自分自身（overLayer）の半分の大きさにします

つまりは最終的にはLightBox本体の大きさから画面のちょうど真ん中に来るように調整してる形です。
イメージとしては下記のようなものになります

A同士は同じサイズ、B同士も同じサイズになっているので真ん中寄せになっています。