Jqueryプラグイン不要!たった数行でdiv要素にjQueryLightBoxを実装するプラグイン不要!たった数行でdiv要素にjQueryLightBoxを実装する久々にjQueryネタ。LightBoxってjQueryプラグインの定番中の定番の気もしますが、プラグインに頼らず超簡単に、Javascript(jQuery)部分はたった数行で書けてしまいますよ!DEMO実装結果jQueryあらかじめhead内にjQueryの読み込みだけはして下さいね。意外にもjavascriptの記述が大変短いですね。CSSについてLightBoxで表示させたいdivなどのBox要素はあらかじめdisplay:noneにしておきます。LightBox表示中は全体を黒地で塗りつぶします。これも普段はdisplay:noneにしておき、アクションが発動した時だけ表示されるようにします。この時黒地で全体を塗りつぶすBlackWindowがLightBoxとして表示させたいdiv要素まで塗りつぶさないようz-indexで重なり順を指定してあるのです。jQueryについてこれは読んだそのまんま。#BlackWindowと#lightbox-panelの2つの要素がクリックされたり、閉じるボタンなどを再びクリックするとフェードイン、フェードアウトするだけ。