jQuery: モーダルウィンドウの作り方
jQueryでモーダルウィンドウを作ります。
並んで表示されているサムネイル画像をクリックすると、
モーダルウィンドウが開いて大きな画像が表示されます。
動作サンプル、サンプルコード、コード解説の順番で記述しています。
動作サンプル
HTML
<p>サムネイル画像をクリックすると、モーダルウィンドウが表示されます。</p>
<ul>
<li><a href="img/08-01.jpg" class="modal">
<img src="img/08-01-small.jpg"></a></li>
<li><a href="img/08-02.jpg" class="modal">
<img src="img/08-02-small.jpg"></a></li>
<li><a href="img/08-03.jpg" class="modal">
<img src="img/08-03-small.jpg"></a></li>
</ul>
<!-- レイヤー -->
<div id="mw_layer"></div>
<!-- 画像表示 -->
<div id="mw_top">
<a href="#">×</a>
<img src="">
</div>
CSS
html, body {
margin: 0;
padding: 0px;
height: 100px;
}
ul {
width: 500px;
}
ul li {
list-style-type: none;
float: left;
margin: 5px;
}
/* レイヤー部分 */
#mw_layer {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: black;
opacity: 0.6;
}
/* 拡大画像表示部分 */
#mw_top {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px; /* 画像の半分 */
margin-left: -225px; /* 画像の半分 */
}
/* close */
#mw_top a{
display: block;
color: white;
font-size: 1.8em;
font-weight: bold;
text-decoration: none;
text-align: right;
cursor: pointer;
}
JavaScript
// 画像用配列
var images = [
'img/08-01.png',
'img/08-02.png',
'img/08-03.png'
];
$(document).ready(function(){
// 画像プリロード
getImages();
// レイヤーをクリック
$('#mw_layer').on('click', function(){
$(this).hide();
$('#mw_top img').attr('src', "");
$('#mw_top').hide();
});
// closeボタンをクリック
$('#mw_top a').on('click', function(){
$('#mw_layer').hide();
$('#mw_top img').attr('src', "");
$('#mw_top').hide();
return false;
});
// サムネイル画像をクリック
$('a.modal').on('click', function(){
// レイヤーを表示
$('#mw_layer').show();
// 画像のパスを取得し、表示する
var str = $(this).attr("href");
$('#mw_top img').attr('src', str);
$('#mw_top').show();
return false;
});
});
// 画像プリロード用関数
function getImages(){
for (i = 0; i < images.length; i++){
$('<img>').attr('src',images[i]);
}
}
コード解説
レイヤーと画像表示部分
<!-- レイヤー -->
<div id="mw_layer"></div>
<!-- 画像表示 -->
<div id="mw_top">
<a href="#">×</a>
<img src="">
</div>
レイヤーと画像表示部分のHTMLです。最初はCSS側で非表示(display: none)にしています。 a要素の中の「×」はクローズボタンです。img要素のsrc属性は空白になっていますが、 ここはjQueryで設定します。
レイヤー部分のCSS
/* レイヤー部分 */
#mw_layer {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: black;
opacity: 0.6;
}
レイヤー部分はウィンドウ全体に表示しますのでposition, top, left, height, widthを上のように設定します。 backgroundは黒ですがopacity:0.6で半透明になります。
画像表示部分のCSS
/* 拡大画像表示部分 */
#mw_top {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px; /* 画像の半分 */
margin-left: -225px; /* 画像の半分 */
}
画面の中央に表示するために上のような設定にしています。 拡大画像のサイズが高さ300px、幅450pxなので、 その半分の数値をmargin-topとmargin-leftに設定しています。
モーダルウィンドウを閉じる
// レイヤーをクリック
$('#mw_layer').on('click', function(){
$(this).hide();
$('#mw_top img').attr('src', "");
$('#mw_top').hide();
});
// closeボタンをクリック
$('#mw_top a').on('click', function(){
$('#mw_layer').hide();
$('#mw_top img').attr('src', "");
$('#mw_top').hide();
return false;
});
グレーのレイヤー部分をクリックした場合と、closeボタンをクリックした場合のどちらでも モーダルウィンドウを閉じるようにしています。
モーダルウィンドウを表示
// サムネイル画像をクリック
$('a.modal').on('click', function(){
// レイヤーを表示
$('#mw_layer').show();
// 画像のパスを取得し、表示する
var str = $(this).attr("href");
$('#mw_top img').attr('src', str);
$('#mw_top').show();
return false;
});
クリックされたサムネイル画像から、画像のパスを取得します。 それをimg要素のsrc属性に設定し、表示しています。