プラグインなしで、画像をPOPUP表示するjQuery
ポップアップくらい、自前で書けるぜ
と言えるような、実装例です。プラグインを導入したけど、他のプラグインと干渉して動かない、デフォルトのものではなく、自分好みにカスタマイズしたいなど、自前でポップアップを書く時の参考にして下さい。
まず、コード全文を載せます。
HTML
<div class="popupbg"></div> <!--ポップアップ背景--> <div class="global_wrapper"> <ul class="item_wrapper"> <li class="item"> <!-- クラス名に"pop"、hrefにポップアップしたいID名を入力--> <a href="#img01_wrapper" class="pop"><img src="image01.jpg" alt="" width="150" height="150" class="thumb"></a> <!-- ポップアップしたい要素--> <div id="img01_wrapper" class="popup_wrapper"> <img src="image01.jpg" alt="" width="400" height="400" class="img"> <p class="caption">Caption1</p> <div class="close_btn">×</div> </div> </li> <li class="item"> <!-- クラス名に"pop"、hrefにポップアップしたいID名を入力--> <a href="#img02_wrapper" class="pop"><img src="image02.jpg" alt="" width="150" height="150" class="thumb"></a> <!-- ポップアップしたい要素--> <div id="img02_wrapper" class="popup_wrapper"> <img src="image02.jpg" alt="" width="400" height="400" class="img"> <p class="caption">Caption2</p> <div class="close_btn">×</div> </div> </li> <li class="item"> <!-- クラス名に"pop"、hrefにポップアップしたいID名を入力--> <a href="#img03_wrapper" class="pop"><img src="image03.jpg" alt="" width="150" height="150" class="thumb"></a> <!-- ポップアップしたい要素--> <div id="img03_wrapper" class="popup_wrapper"> <img src="image03.jpg" alt="" width="400" height="400" class="img"> <p class="caption">Caption3</p> <div class="close_btn">×</div> </div> </li> </ul> </div>
CSS
.item_wrapper:after {
content: '';
display: block;
clear: both;
height: 0;
}
.item {
width: 150px;
height: 150px;
padding: 20px;
float: left;
}
.popupbg {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
top: 0;
left: 0;
display: none;
}
.popup_wrapper {
width: 500px;
height: 600px;
position: fixed;
top: 50%;
left: 50%;
margin: -300px 0 0 -250px;
z-index: 11;
text-align: center;
display: none;
}
.popup_wrapper .popup {
position: relative;
}
.popup_wrapper .img {
display: inline-block;
width: 500px;
height: 500px;
}
.popup_wrapper .caption {
padding: 10px;
font-size: 18px;
color: #FFF;
}
.popup_wrapper .close_btn {
line-height: 30px;
position: absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
border-radius: 15px;
background: #FFF;
margin: -15px -15px 0 0;
font-size: 24px;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
Javascript (jQuery)
$(function(){
$('.pop').click(function(e){
e.preventDefault();
var id = $(this).attr('href');
$(id).fadeIn();
$('.popupbg').fadeIn();
})
$('.popupbg,.close_btn').click(function(){
$('.popup_wrapper:visible').fadeOut();
$('.popupbg').fadeOut();
})
})
メインはjsなのでここではHTMLとCSSは軽めに説明します。
大枠としては<li>タグに囲まれてfloatをかけて横に並んでいます。その中に<a>タグで囲われた<img>タグが入っています。この<a>タグのhref属性にポップアップさせたいエリアのid名が書かれています（#img01_wrapper）。また、背景となる.popup_bg という要素が一番最初に挿入されています。
CSSはポップアップ時に表示する、.popup_wrapper, .popup_bg に display:none を指定して、最初は非表示にしています。そしてポップアップ本体である.popup_wrapperにはposition:fixedで画面に固定して、left:50%, top:50%にして、ポップアップエリアの高さと幅のそれぞれ半分（300pxと250px）をマイナスのマージンに指定すると、ちょうど画面中央寄せになります。
それでは、順を追って説明します。
そして、メインのjsについてです。
$(function(){
...
})
まずは、「ドキュメントが読み込んだら、・・・を実行してね」というjQueryでよく使うフレーズ。クリックやホバー系のイベントはこの書き出しからまず始まります。
$('.pop').click(function(e){...})
「pop」という名前のクラスを「クリック」したら「function(e){…}」を実行してね、という意味。ここでの”e”は引数なので、任意の文字をつけられますが、（おそらくeventの）eを使うことが多いと思います。function(e){…}と書くことで{}の処理にeというイベント（今回はaタグのイベント）を渡します。
e.preventDefault();
クリックの中のfunctionの具体的な内容です。.preventDefault() でデフォルトのイベントを禁止します。今回は「e」についてのイベントを禁止になります。ここで「e」というのは「pop」というクラスをクリックした時のイベントです。HTMLを見ると、「pop」のクラスがついているのは<a>タグです。つまり、「e」= <a>タグのイベント、今回禁止するのは<a>タグをクリックした時に起こる、リンク先に飛ぶ行為を禁止しています。これがないと、通常の動き、#img01_wrapperのある位置まで画面が飛んでいきます（ただし、今回は#img01_wrapperは画面上部にあるので、動くことはないと思いますが）。
とにかく、aタグの動作を禁止するには
$('a').click(function(e){
e.preventDefault();
})
と書くんだな、くらいの認識でもとりあえずは大丈夫です。
var id =$(this).attr('href');
まず、「var」というのは変数の宣言です。var ◯◯で◯◯という変数を作ります。◯◯は好きな名前（後から見ても分かりやすい名前）を付けられます。$(this)は字のごとく「これ」を選択します。
ここで、$(this)が指す内容ですが、今回この一連の動作は”.pop”をクリックすると起こるイベントです。つまり、「この」が指すのは”.pop”である<a>タグになります。
次に.attr(属性名)で属性を取得できます。今回は.attr(‘href’)なので、href属性を取得します。
2つを組み合わせると、「『この』クリックした<a>タグのhref属性を取得」という意味になります。そして、その<a>タグのhref属性＝ポップアップしたid名がvar idに格納されます。
なぜ変数を使ってid名を格納しているかと言うと、今回のHTMLには”.pop”というのが3つ存在しているので、クリックした時点ではどの.popがクリックされたか分からない（正確には区別できない）からです。どのポップアップを表示させるべきか分からないのです。そのため、クリックした<a>タグについているhref属性を取得することで、どのポップアップを表示させるべきか判断するのです。
格納したvar idに対して$(id)で先ほどのid名を選択します。それを表示させたいので、
$(id).fadeIn();
と書くことでフェードインします。.fadeIn()はその名の通りフェードインの動作をします。()の中に数字（ミリ秒）を入れることでふわっとする時間を調整できます。ミリ秒とは1/1000秒、つまり1000ミリ秒＝1秒です。
ちなみに、変数を使わない方法もあります。<a>タグとポップアップすべき画像は対応しているので、<a>タグにidを付与して（例えば１つめにid=”img01″と付ける）、次のようにもかけます。
$('#img01').click(function(){
$('#img_wrapper').fadeIn();
})
これを３つ、それぞれについて書けばポップアップされます。ただ、これが４つ５つ…と増えていったら全てについて書かなければいけません。書き終えた後に変更があれば、全てについて書きなおさなければなりません。そこで変数を使うのです。コピペしていくと、書き換えるのは’#img01’と’#img_wrapper01’になります。このような同じ処理を複数のものに適用したい時に変数を使うと便利です。
ちょっと本筋からは逸れましたが、ここまでで、クリックした画像のポップアップが表示されるようになりました。まだ黒い背景が表示されないので、
$('.popupbg').fadeIn();
の１文も入れます。’.popupbg’は一つしかないので、変数を使う必要はありません。
これでようやく画像の表示ができました。ただし、非表示の処理を記述していないので、クリックすると出っぱなしになります。これではマズイので表示を消す記述をします。
$('.popupbg,.close_btn').click(function(){
$('.popup_wrapper:visible').fadeOut();
$('.popupbg').fadeOut();
})
またクリックしたら動作するので$(…).click(fucntion(){…})という書き方をします。今回は’.popupbg’と’.close_btn’をクリックした時に作動してほしいので、$(‘.popupbg,.close_btn’)と書いています。カンマで区切ることで複数のものを選択できます。’.popupbg’もしくは’.close_btn’をクリックした時にfunction以下を実行してね、ということになります。
ここで、’.close_btn’はHTMLに3つあるので、先ほどと同じように属性を取得するなりして、特定する必要があるのでは？と思う方もいるかもしれませんが、この場合はしません。というのも、先ほどはクリックした画像とポップアップする画像が対応関係にあったので、取得する必要がありました。しかし、今回はどの’.close_btn’をクリックしても動作は変わらないので特定していないです。
そして消したいもの、’.popup_wrapper’と’.popupbg’をさっきと同じように.fadeOut()を使って非表示にしています。.fadeOut()はfadeIn()と逆でふわっと消します。ここで.popup_wrapperの後ろに’:visible’とついていますが、こちらは.popupw_wrapperの中でも表示されているもの（visible）を指定できます。今回は付けなくても動作に問題はないのですが、このような表現があると便利な場面もあります。
以上で、ポップアップを実装するjQueryは完了です。.popup_wrapperの中身を変えれば画像だけでなく、通常のテキストやHTML、埋め込み動画なども可能です。さらに応用して、カルーセル系のプラグインと組み合わせれば、ポップアップの画像を前後へ切り替えるようなものも作れます（プラグインにもよりますが）。
自分でポップアップを実装すると、自由に表現をカスタマイズできるので何かと便利です。
ポップアップが作れるようになったら、こちらの記事もどうぞ
ドップダウンメニューの作り方
