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属性に設定し、表示しています。

jQuery入門