jQueryでモーダルウィンドウを作る方法を勉強したので、記録しておきます。
#1 準備
HTMLを準備。a要素に"modal"クラスを付けておきます。
<ul>
<li><a href="images/img1.png" class="modal">
<img src="images/img1.png"></a></li>
<li><a href="images/img2.png" class="modal">
<img src="images/img2.png"></a></li>
</ul>
結果。
ここから、画像をクリックすると、その画像が前面に表示されるようにしていきます。
※この画像は適当にフリー素材を使っているだけで、特に意味はありません。
#2 JavaScriptの記述
モーダルウィンドウを実装するために、2つの要素を追加します。
1つ目は、前面に表示される画像。
2つ目は、画像が前面に表示されているときに、背景をグレーにするための要素です。
これらは初期表示せず、まずjQueryで要素を追加します。
また、グレーの背景をクリックすると画像の前面表示がキャンセルされる(モーダルウィンドウを閉じる)機能、画像をクリックすると上記2要素が表示される(モーダルウィンドウを表示する)機能を作ります。
$(function(){
$("body").append("<div id='background'></div><div id='mainImage'></div>");
$("#background").click(function(){
//モーダルウィンドウを閉じる
$(this).hide();
$("#mainImage").hide();
});
$("a.modal").click(function(){
//モーダルウィンドウを開く
$("#background").show();
$("#mainImage").show();
return false;
});
});
$("body").appendにより、要素を追加します。
追加するのは、グレーの背景<div id='background'></div>と画像<div id='mainImage'></div>の2つ。今の所中身はありません。
ウィンドウの開閉は、hide()とshow()で要素を表示・非表示することで実装します。
#3 CSSの記述
jQueryで追加した2要素について、中身を作るためCSSを記述します。
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#background {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
}
#mainImage {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -256px;
margin-left: -220px;
}
html, body
グレー背景を画面いっぱいに表示するため、まずhtml、body要素について、height: 100%;とします。
#background
その上で、グレー背景の要素#backgroundについて、height: 100%;、width: 100%;とします。これでブラウザのウィンドウいっぱいに要素が表示されます。
background-color: black;、opacity: 0.5;により、背景を黒にして透過させます。これがグレーの背景になります。
#mainImage
top: 50%;、left: 50%;により、ウィンドウの中心点を画像を表示する基準(画像の左上の点)にします。
さらにmarginに、画像の半分のサイズのマイナス値を指定することで、画像をサイズの半分だけ左上にずらすような効果が得られ、結果として画像が画面中央に表示されます。
最後に、#backgroundと#mainImageはどちらも初期表示しないため、display: none;としておきます。
結果。
画像をクリックするとグレーの背景が現れるところまでできました。
#4 JavaScriptの記述、もう一度
あとは、グレーの背景とともにクリックした画像を表示できれば完成です。
現時点では、#mainImageのdiv要素は表示されているのですが、中身がない状態です。したがって、これを、クリックした画像を表示するimg要素に書き換える必要があります。
$("#mainImage").show();の部分に追記していきます。
$("#mainImage").show().html("<img src='クリックした画像のパス'>");
これでimg要素に書き換えることができました。
次に、クリックした画像のパスをsrc属性に設定していきます。
これは、クリックしたa要素のhref属性から取得できます。クリックした要素はthisで指定し、hrefを取得しましょう。
$("#mainImage").show().html("<img src='" + $(this).attr("href") + "'>");
ダブルクォーテーションとシングルクォーテーションが混ざって見にくいので注意。
全体はこんな感じになりました。
$(function(){
$("body").append("<div id='background'></div><div id='mainImage'></div>");
$("#background").click(function(){
//モーダルウィンドウを閉じる
$(this).hide();
$("#mainImage").hide();
});
$("a.modal").click(function(){
//モーダルウィンドウを開く
$("#background").show();
//表示した上で、img要素に書き換える
$("#mainImage").show().html("<img src='" + $(this).attr("href") + "'>");
return false;
});
});
結果。
画像をモーダルウィンドウ的に表示することができました！