モーダルウィンドウを実現するjQueryコード [jQuery] [js]

2017/03に公開

モーダルウィンドウについては商用利用も含め、無料で（わりと自由に）使用できるプラグインが結構ネットに落ちています。
しかも軽量で、いろいろな機能を備えているものもあります。

なので、自分でコードを書いてモーダルウィンドウをつくるという機会はあまりないかもしれません。

しかし、会社によってはプラグインの使用を制限しているところもありますし、組み込まれているシステムとの兼ね合いで、ネットで配布されている一般的なプラグインが使用できない場合があります。

イチから自分でコードを書いて、制作環境やwebシステムにあわせたものをつくれれば一番よいのでしょうが、そこまでの知識がなかったり、時間がなかったりするのが現実かと思います。

そこで、Google先生にきいてみると、モーダルウィンドウの実現の仕方を解説しているサイト・blogがそれなりにあったりします。
まずは、そういうコードをコピペして、自分でカスタマイズしてみるところから始めてみると良いかもしれません。

CSSだけでモーダルウィンドウを実現する方法を紹介しているところもありますが、ここではjQueryを使ったものをご紹介します。

CSSオンリーのモーダルウィンドウについては、ページ下の方に参考リンクを添付しました。

参考元サイト：初心者でも分かる！モーダルウィンドウの作り方－ syncer
参考元サイト：clickイベント(jQuery)の罠－ Webサプリ（clickできない問題対処法）
参考元サイト：特定の要素以外で発生したイベントをキャッチする（jQuery Advent Calendar 2014 jQuery）－ ksk1015のブログ（イベントが発生する要素の子要素はイベント除外させたいとき）
参考元サイト：# jQueryで特定要素以外クリック時のイベントを取得する－ Qiita（イベントが発生する要素の子要素はイベント除外させたいとき）

sample

ここをクリック

ここにコンテンツtest

閉じる

ここをクリック（画像表示）

IE8以下では動作しません。
このサンプルで使用している画像はPhotoStockerさんから拝借しております。商用利用も可の無料写真素材集です。

html

モーダルウィンドウを実装するのに必要なオブジェクトを用意します。

<span class="m_trigger">ここをクリック</span>
<div>ここにコンテンツ</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1行目：モーダルウィンドウを表示させるきっかけとなるオブジェクト（class[m_trigger]）を設置（使用タグ・class名任意）。
ここではclass[m_trigger]をクリックするとコンテンツが表示されるようにする。
2行目：class[m_trigger]のすぐ後に、モーダルウィンドウで表示させたいコンテンツを用意。
コンテンツは画像（imgタグ）だけでも、htmlソースでも良い。

2行目では、モーダルウィンドウで表示させたいコンテンツをdivタグで囲っていますが、このタグはdivタグに限りません。
ただし、以下で説明するjs（jquery）では、モーダルウィンドウに表示させるときはこのdivタグ（class[m_trigger]のすぐ後に記述された要素）の中身を表示させます。
なので、この要素自体にstyleを設定しても、モーダルウィンドウで表示させたときには反映されないので、注意してください。
このほかに、モーダルウィンドウで表示させたいコンテンツを表示させるための要素や、オーバーレイ（ページ一面を覆って、モーダルウィンドウで表示させるコンテンツを際立たせるオブジェクト）を用意しますが、ここではhtmlソースに直接記述せずに、jqueryで挿入して表示させます。
class[m_trigger]+モーダルウィンドウで表示させたいコンテンツの組み合わせは複数あってもよいです。

ちなみに、上記のサンプルのソースは以下のようになっています。

<span class="m_trigger">ここをクリック</span>
<div><div class="m_cont"><p>ここにコンテンツtest</p><span class="m_close">閉じる</span></div></div>
<br>
<span class="m_trigger">ここをクリック（画像表示）</span>
<div><img src="画像パス" alt=""></div>

css

.m_trigger{cursor: pointer;}

#m_overlay{
    background:rgba(0,0,0,0.5); /*背景色や透明度は任意*/
    position: fixed;
    top:0;
    left: 0;
    width:100%;
    height:120%;
    display: none; /*あらかじめ非表示にしておく*/
    z-index: 9999; /*z-indexの値は状況に合わせて任意*/
    cursor: pointer;
}

.m_base{
    display: inline-block;
    position: relative;
    cursor: auto;
}
@media screen and (max-width: 1047px) {
    .m_base{width:90%;}
    .m_base img{width:100%;}
}

.m_close{cursor: pointer;}
.m_close.m_btn{position: absolute;}/*閉じるボタンの位置は任意*/

.m_cont{
    background:#fff; /*モーダルで表示するコンテンツの背景色は任意*/
    width:600px; /*モーダルで表示するコンテンツの幅や高さは任意。ただし画面サイズ等を考慮*/
}
@media screen and (max-width: 1047px) {
    .m_cont{width:auto;}
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1行目：モーダルウィンドウを表示させるきっかけとなるオブジェクト（class[m_trigger]）のstyleを設定。
サンプルではspanタグを使用しているので、PC向けにマウスポインターの形状を設定している。そのほかデザイン的な設定があれば、記述する。
3～13行目：オーバーレイの設定。
モーダルウィンドウを表示させたときに、元の画面の上に表示させるので、透過させたグレーとか何かしら色をつけておくと、モーダルウィンドウが見やすくなる。
ブラウザウィンドウいっぱいを覆うので、サイズは幅・高さとも100%（高さが少し大きめになっているのは、スマホ対策）。
表示したときはブラウザウィンドウに固定したいので、position: fixedにしておく。
サンプルではオーバーレイをクリックしたときにモーダルウィンドウを閉じたいので、PC向けにクリックできることをわかりやすくマウスポインターの形状も設定しておく。
15～19行目：モーダルウィンドウで表示させたいコンテンツを受け取る（下のjqueryで詳述）ためのオブジェクトの設定。
受け取るコンテンツのサイズに合わせて可変させたいので、ここではdisplay: inline-blockを設定している。
なお、この要素はオーバーレイの子要素になるので、マウスポインターの形状がクリックできる状態のままになってしまうので、デフォルト設定に戻す。
20～23行目：スマートデバイス向け設定。
モーダルウィンドウで表示させたいコンテンツを受け取るためのオブジェクトの幅はPC向けでは設定しなかったが、スマートデバイス向けでは設定。
画像も親タグいっぱいに表示させるように設定。
25～26行目：モーダルウィンドウの閉じるボタンの設定。
サンプルでは、モーダルウィンドウで表示するコンテンツの右上に×ボタンと、画像ではない方にはコンテンツのソース内にもテキストの閉じるボタンを設置しているので、class名を分けているが、構成は任意。
デザイン的なstyleは省略しているが、サンプルではcssを駆使して×ボタンを表現している。×は画像でもテキストでも、webフォントを利用しても良い。
28行目以降：モーダルウィンドウで表示するコンテンツの設定。
背景色や幅など、任意で設定。画面（ブラウザウィンドウ）幅に対して大きすぎるコンテンツの場合は、状況に合わせて縮小させたり、スクロールを表示させたりなどの工夫も必要。

最後に、画面（ブラウザウィンドウ）幅に対して大きすぎるコンテンツの場合は工夫をと書きましたが、その場合はむしろモーダルウィンドウを使って表示させるべきかどうかもあわせて考察してください。

js

js（jquery）を組み立てる前に、何をしたいかあらかじめ思い描いておくと、コードの組み立てが楽になります。
この場合、モーダルウィンドウを表示させるきっかけとなるオブジェクト（class[m_trigger]）をクリックしたら、オーバーレイを表示して、オーバーレイの中にコンテンツを表示して、閉じるボタンやオーバーレイをクリックしたら、モーダルウィンドウを閉じたいなーと漠然とでよいので、思い浮かべてみます。
そのあとで、オーバーレイはふわっとフェードインで表示させたいなーとか、画面の真ん中に表示させたいなーとか、細かいことを考えましょう。

$(function() {
    $('.m_trigger').next().hide();
    
    $('.m_trigger').on('click',function(){
        $('body').append('<div id="m_overlay"><div class="m_base"><span class="m_close m_btn"></span></div></div>'); //オーバーレイをbodyの終タグ直前に挿入
        $('.m_base').append($(this).next().html());
        
        $('#m_overlay').fadeIn();//オーバーレイをフェードイン
        
        posiM();
        
        $(window).resize(posiM);/*リサイズ対応*/
    });
    
    function posiM(){
        var wh = window.innerHeight;
        var ww = window.innerWidth;
        var ch = $('.m_base').outerHeight();
        var cw = $('.m_base').outerWidth();
        
        var cc = $('.m_close.m_btn').outerHeight();
        
        if((ch + cc) > wh){ //スマートデバイス対策
            $('.m_base').css('width',wh * 0.9);
            cw = $('.m_base').outerWidth();
            ch = $('.m_base').outerHeight();
        }
        
        $('.m_base').css({
            'left' : ((ww - cw) / 2) + 'px',
            'top' : ((wh - ch) / 2) + 'px',
        });
    }
    
    //閉じる処理
    $(document).on('click','#m_overlay', function(evt){
        if( !$(evt.target).closest('.m_base').length ){//.m_baseを除く
            $('#m_overlay').fadeOut(function(){ //オーバーレイをフェードアウト
                $('#m_overlay').remove(); //オーバーレイを削除
            });
        }
    });
    $(document).on('click','.m_close',function(){
        $('#m_overlay').click();
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

2行目：モーダルウィンドウで表示させたいコンテンツをあらかじめ非表示にする。
cssで非表示にしても良いが、モーダルウィンドウを表示させるきっかけとなるオブジェクト（class[m_trigger]）のすぐ後に記述するした、モーダルウィンドウで表示させたいコンテンツを特定のタグで囲むかどうか不明なので、jqueryで対応。
4～13行目：モーダルウィンドウを表示させるきっかけとなるオブジェクト（class[m_trigger]）をクリックしたときの処理。
5行目：オーバーレイ（id[m_overlay]）をbodyの終タグ直前に挿入。
オーバーレイの中には、モーダルウィンドウで表示させたいコンテンツを受け取るための要素（class[m_base]）と閉じるボタン（class[m_close]）もあらかじめ用意しておく。
この閉じるボタンはサンプルでは、コンテンツの右上に表示させるもので、不要であれば削除してもよい（入れといて、cssで非表示にしても良い）。
6行目：モーダルウィンドウで表示させたいコンテンツを挿入。
クリックしたclass[m_trigger]のすぐ後に記述された要素の中身をclass[m_base]に挿入。
8行目：オーバーレイごとコンテンツを表示。
ここではfadeInを使って表示させる。
10行目：モーダルウィンドウの位置を調整する関数posiMを実行。
モーダルウィンドウで表示させたいコンテンツをブラウザウィンドウの真ん中に表示させる関数（後述）を実行して位置を調整。
12行目：ブラウザウィンドウのサイズが変更されたら、また関数posiMで位置を調整。
15～33行目：モーダルウィンドウの位置を調整する関数posiMを記述
16～17行目：ブラウザウィンドウの高さ（変数[wh]）と幅（変数[ww]）を取得
18～19行目：モーダルウィンドウの高さ（変数[ch]）と幅（変数[cw]）を取得
21行目：モーダルウィンドウの右上に表示される閉じるボタンの高さ（変数[cc]）を取得
23～27行目：モーダルウィンドウで表示したコンテンツの高さが画面サイズ（ブラウザウィンドウの高さ）を超えたときの対策。
コンテンツと閉じるボタンの高さの合計が、画面サイズ（ブラウザウィンドウの高さ）を超えてしまうと、閉じるボタンが見えなくなってしまうため、モーダルウィンドウの幅を変更して、モーダルウィンドウの高さ（変数[ch]）と幅（変数[cw]）を再取得。
29～32行目：ブラウザウィンドウサイズとモーダルウィンドウのサイズの差を半分にして、モーダルウィンドウの位置を設定。
36～42行目：オーバーレイ（id[m_overlay]）をクリックしたら、モーダルウィンドウをオーバーレイごと削除する処理。
オーバーレイ（id[m_overlay]）はappendで挿入したオブジェクトなので、$(document).on()を使ってイベント処理を記述しないとうまく動作しない。
37～41行目：モーダルウィンドウ（class[m_base]）で表示しているコンテンツをクリックの範囲外にする。
オーバーレイ（id[m_overlay]）はモーダルウィンドウ（class[m_base]）を内包しているので、コンテンツをクリックしてもモーダルウィンドウが閉じてしまうので、closestを使って除外する。
38～40行目：オーバーレイ（id[m_overlay]）を非表示にする。
fadeOutをつかって非表示にした後、オーバーレイごとモーダルウィンドウで表示させていたコンテンツを削除。これをしないと再びモーダルウィンドウを表示させたとき、前に表示したコンテンツも表示される。
43～45行目：モーダルウィンドウ（class[m_base]）内にある閉じるボタン（class[m_close]）をクリックしたら、オーバーレイ（id[m_overlay]）をクリックしたと判断させる。

21～27行目は主にスマートデバイス対策です（不要であれば削除して良いです）。
場合によってはPCでの表示に影響が出たり、かえって見づらくなる可能性もあるので、このような方法ではなく、スマートデバイスではあらかじめモーダルウィンドウのサイズは固定しておいて、スクロールで対処するなどしても良いかもしれません。方法はコンテンツの条件などによって変えてください。
モーダルウィンドウ内で画像を切り替えたいとかそういうのは、カルーセルスライダーとかタブ切り替えとかと組み合わせれば、何とかなるんじゃないかなーと思います。

戻る

Top