プラグイン不要！たった数行でdiv要素にｊQueryLightBoxを実装する
プラグイン不要！たった数行でdiv要素にjQueryLightBoxを実装する
久々にjQueryネタ。LightBoxってjQueryプラグインの定番中の定番の気もしますが、プラグインに頼らず超簡単に、Javascript(jQuery)部分はたった数行で書けてしまいますよ！
DEMO
jQuery
あらかじめhead内にjQueryの読み込みだけはして下さいね。
$(document).ready(function(){
//show-panelボタンをクリックしたらLightBoxを表示する
$("a#show-panel").click(function(){
$("#BlackWindow, #lightbox-panel").fadeIn(300);/*表示速度は数値を調整*/
})
//CloseボタンをクリックしたらLightBoxを閉じる
$("a#close-panel").click(function(){
$("#BlackWindow, #lightbox-panel").fadeOut(300);/*フォードアウトの速度は数値を調整*/
})
//背景の黒地をクリックしたらLightBoxを閉じる
$("#BlackWindow").click(function(){
$("#BlackWindow, #lightbox-panel").fadeOut(300);/*フォードアウトの速度は数値を調整*/
})
})
CSS
/* Lightbox で表示させるDIV要素のCSS */
#lightbox-panel {
-moz-border-radius: 6px;
background: #eef2f7;
-webkit-border-radius: 6px;
border: 1px solid #536376;
-webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
-moz-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
padding: 14px 22px;
width: 400px;
position:fixed;
top:100px;
left:50%;
display:none;
z-index:10;
border:2px solid #CCCCCC;
padding:10px 15px 10px 15px;
margin-left:-200px;
}
/* Lightbox表示時に背景を黒に */
#BlackWindow{
display:none;
background:#000000;
opacity:0.7;/*黒地の背景の調整はこの数値で調整*/
filter:alpha(opacity=70);/*黒地の背景の調整はこの数値で調整*/
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1;
}
HTML
Show
jQueryLightBoxの解説
意外にもjavascriptの記述が大変短いですね。
CSSについて
LightBoxで表示させたいdivなどのBox要素はあらかじめdisplay:noneにしておきます。
また、LightBox表示中は全体を黒地で塗りつぶします。これも普段はdisplay:noneにしておき、アクションが発動した時だけ表示されるようにします。
この時黒地で全体を塗りつぶすBlackWindowがLightBoxとして表示させたいdiv要素まで塗りつぶさないようz-indexで重なり順を指定してあるのです。
jQueryについて
これは読んだそのまんま。#BlackWindowと#lightbox-panelの２つの要素がクリックされたり、閉じるボタンなどを再びクリックするとフェードイン、フェードアウトするだけ。
簡単ですね！