【jQuery】jQueryでモーダルウィンドウを作る

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;
    });
});

結果。

画像をモーダルウィンドウ的に表示することができました！