HOME >
JavaScript >
jQueryでモーダルウィンドウを作成する方法【初心者にもわ...

JavaScript

jQueryでモーダルウィンドウを作成する方法【初心者にもわかりやすく解説】

投稿日:2022年03月11日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

モーダルウィンドウとは？

モーダルウィンドウとは、ユーザーがウィンドウを閉じるまでページ内の他の操作をできなくする機能を持ったウィンドウのことです。

次のような機能を持ったウィンドウを指します。開いたウィンドウとページの間にはフィルターが掛かり、モーダルウィンドウを閉じるまでスクロールやページ内の要素のクリックなどを行うことができなくなります。

モーダルウィンドウの例

ユーザーの操作を制限することで、意図しない操作をされることを防ぐ効果があります。必然的にモーダルウィンドウを操作せざるを得ないので、広告などユーザーの注目を集めたいコンテンツの表示などに利用されます。

モーダルウィンドウを使うには？

モーダルウィンドウをサイトで使用するには、Javascript（jQuery）を用いて作成します。

jQueryUIなどのライブラリを利用すれば手軽に導入できますが、今回はライブラリを使わずに自作する方法を説明します。

jQueryUIのダイアログの使い方

jQueryUIを使えば、リッチなデザインと機能を持つダイアログを手軽にサイトに実装することが可能です。jQueryUIのdialogはダイアログの開閉をはじめ、モーダル設定やドラッグの可否など細かい設定も用意されており、カスタマイズ性も高く使いやすいです...【もっと読む】

作成するにあたって、モーダルウィンドウに必要な機能は以下のとおりです。

ボタンのクリックなど、ユーザーのアクションをきっかけにウィンドウが開く
クリックしたボタンに対応したウィンドウを開く
ウィンドウの下にはフィルターを表示する
ウィンドウには閉じるボタンを設置する
ウィンドウ以外をクリックしても閉じるようにする
ウィンドウが開いている間はページのスクロールを不可にする

ここからは段階を踏んでモーダルウィンドウをjQueryを使って自作する方法を説明していきます。

モーダルウィンドウの作り方

今回は冒頭の例のような、ボタンをクリックしたら表示されるモーダルウィンドウの作り方を説明します。ページが読み込まれた時に表示するモーダルウィンドウも基本的な構造は同じです。

仕組みとしてはjQueryのaddClassメソッドとremoveClassメソッドを使ってクラスを付け外しすることで表示と非表示を切り替えるという方法です。

jQueryをCDNで読み込む

ここで説明するモーダルウィンドウの作成には、jQueryを使用するので事前にサイトの<head></head>の中などに以下を記述してCDNで読み込んでおいてください。

CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTMLで要素を用意する

モーダルウィンドウ本体とボタンをHTMLで用意します。

最終的にボタン1をクリックしたらウィンドウ1が開き、ボタン2をクリックしたらウィンドウ2が開くようにするために、ボタンにはそれぞれデータ属性で番号を振っておいてください。モーダルウィンドウ側にはidを付与し、idの末尾の番号がボタンのデータ属性の番号と連動するようにします。

ウィンドウを開いたときにオーバレイで表示するフィルターも空の要素として用意しておきます。

HTML

<!--開くボタン-->
<button class="modalOpen" data-number="1">開く1</button>
<button class="modalOpen" data-number="2">開く2</button>
<div class="sampleArea">スクロール確認用の要素</div>
<!--モーダルウインドウ1ここから-------------->
<div id="modal1" class="modalWindow">
    <div class="modalInner">
        <!--モーダルタイトル-->
        <div class="modalTitle">
            <span>タイトル1</span>
        </div><!--end title-->
        <!--メイン-->
        <div class="modalContents">
            <img src="forest.jpg" alt="テスト用">
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div><!--end modalContents-->
        <!--ボタンエリア-->
        <div class="modalBtn">
            <span class="ok">OK</span><span>閉じる</span>
        </div><!--end modalClose-->
    </div><!--end modalInner-->
</div><!--end modalWindow-->
<!--モーダルウインドウ1ここまで-------------->

<!--モーダルウインドウ2ここから-------------->
<div id="modal2" class="modalWindow">
    <div class="modalInner">
        <!--モーダルタイトル-->
        <div class="modalTitle">
            <span>タイトル2</span>
        </div><!--end title-->
        <!--メイン-->
        <div class="modalContents">
            <img src="landscape.jpg" alt="テスト用">
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
            ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div><!--end modalContents-->
        <!--ボタンエリア-->
        <div class="modalBtn">
            <span class="ok">OK</span><span>閉じる</span>
        </div><!--end modalClose-->
    </div><!--end modalInner-->
</div><!--end modalWindow-->
<!--モーダルウインドウ2ここまで-------------->

<!--モーダルオーバーレイ-->
<div class="modalOverRay"></div>

CSSでスタイルを調整する

用意したHTMLのスタイルを設定していきます。デザインの部分は自由に作成してください。CSS設定が必要なモーダルウィンドウの機能に関わる設定は次の通りです。

モーダルウィンドウを固定表示にする

モーダルウィンドウにはposition:fixedを指定し、常に画面の中央に表示されるように配置しておきます。ここではcalc関数を利用して位置を決めました。

位置の調整が済んだら、opacityプロパティもしくはvisibilityプロパティを使って、モーダルウィンドウを非表示にしておきます。

後ほどjQueryでクリック時にクラスを付与された時のスタイルも用意します。クラスが付与された際に要素を表示するようにしておきます。

オーバレイを作成する

オーバレイ要素も画面全体を覆うように表示したいので、position:fixedを指定します。下のページコンテンツを完全に隠すのではなく透過するように見せたいので、opacityプロパティで不透明度を下げておきます。

スタイルの調整が済んだら、display:noneで非表示にしておきます。

オーバーレイにおいてもクリック時にクラスを付与された時のスタイルも用意します。クラスが付与された際には、display:blockに戻して要素を表示するようにしておきます。

スクロール不可にするCSS

モーダルウィンドウが開いている間はページのスクロールをできないようにしたいので、jQueryでクラスが付与された状態では、ビューポートを使ってbody要素の高さを画面の高さと同じし、overflowではみ出した部分を非表示にします。

最終的なCSSは以下のようになりました。

CSS

/*開くボタン*/
.modalOpen{
    width: 100%;
    max-width: 200px;
    background:#333;
    border:none;
    border-radius: 5px;
    color: #e9e9e9;
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    margin: 10px;
}
.modalOpen:hover{
    cursor: pointer;
    opacity: .8;
}
/*モーダルウィンドウ*/
.modalWindow{
    width:calc(100vw - 100px);
    height:calc(100vh - 100px);
    min-height:150px;
    max-height:600px;
    background: #f9f9f9;
    border:solid 3px #666;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 0 3px #e9e9e9;
    position:fixed;
    top:calc(50% - ((100vh - 100px) / 2));
    left:calc(50% - ((100vw - 100px) / 2));
    z-index: 999;/*最前面に配置する*/
    opacity: 0;
    transform:scale(0);
    transition: .5s ease-in-out;
}
.modalWindow.active{
    opacity: 1;
    transform: scale(1);
    transition: .5s ease-in-out;
}
@media only screen and (min-width:900px){
    .modalWindow{
        width:600px;
        left:calc(50% - 300px);
    }
}
/*モーダルウインドウ内*/
/*タイトル*/
.modalTitle{
    padding: 5px;
    background:#999;
    color: #f9f9f9;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
/*メイン*/
.modalContents{
    height: 50px;
    background: #f9f9f9;
    padding:10px;
    overflow-y: scroll;
}
/*モーダルウインドウ内ボタン*/
.modalBtn{
    text-align: center;
    background: #e9e9e9;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.modalBtn span{
    display: inline-block;
    width:calc(100% / 2 - 10px);
    font-weight:bold;
    background: #333;
    border-radius: 5px;
    color: #f9f9f9;
    padding: 5px;
    margin: 5px;
}
.modalBtn span:hover{
    cursor: pointer;
    opacity: .8;
}
/*オーバーレイ*/
.modalOverRay{
    display: none;
    width:100%;
    height: 100%;
    background: #666;
    position: fixed;
    top:0;
    left: 0;
    z-index: 99;/*モーダルウィンドウの下に配置する*/
    opacity: .5;
}
.modalOverRay.active{
    display: block;
}
/*モーダルウィンドウが開いていた時はスクロール不可*/
body.active{
    height: 100vh;
    overflow: hidden;
}

jQueryで機能を作成する

最後にjQueryを使ってモーダルウィンドウを動くように設定していきます。

クリックイベントを設定する

ユーザーがボタンをクリックしたことをきっかけに処理を開始したいのでonメソッドを使用します。ウィンドウを開く処理やオーバーレイを表示する処理をこの中に記述していきます。

jQuery

var btn = $(".modalOpen");
//開くをクリックしたら
btn.on("click",function(){
    //処理をここに記述する
});//end click

なお広告などページの読み込みと同時にモーダルウィンドウを開きたい時はclickではなく$(window).on("load",function(){...})というようにて調整します。

クリックしたボタンに応じたウィンドウを開く

まずHTML側であらかじめボタンに設定しておいたデータ属性を取得します。thisをセレクターにして、attrメソッドを使うことでボタンの番号を入手できます。

取得した番号を使えば開きたいモーダルウィンドウのidを指定することができます。あとは対象のモーダルウィンドウにクラス「active」をaddClassメソッドで付与すればOKです。

クラス「active」のスタイルをCSSで指定しているので、クリックすればボタンに応じたウィンドウが表示されます。

オーバーレイの表示とスクロール不可に関しても同様に、オーバーレイ要素（.modalOverRay）とbodyタグにaddClassメソッドでクラス「active」を付与します。

jQuery

var btn = $(".modalOpen");
var overRay = $(".modalOverRay");
//開くをクリックしたら
btn.on("click",function(){
    //クリックしたボタンの番号データを取得
    var btnNo = $(this).attr("data-number");
    //ボタンの番号データを使って開くモーダルウィンドウを指定
    var targetId = "#modal" + btnNo; 
    //モーダルウィンドウを表示
    $(targetId).addClass("active");
    //オーバーレイを表示
    overRay.addClass("active");
    //モーダルウィンドウが開いている時はページのスクロールを不可にする
    $("body").addClass("active");
});//end click

閉じるボタンをクリックしたら閉じる

上記とは別に閉じるボタンをセレクターにした新しいクリックイベントを作成し、ウィンドウを閉じる処理を記述していきます。

先程付与したクラス「active」をremoveClassメソッドで取り除けば非表示に戻すことができます。

jQuery

//閉じるボタンをクリックしたら
var closeBtn = $(".modalBtn span");
closeBtn.on("click",function(){
    //付与したクラスを削除して非表示にする
    overRay.removeClass("active");
    $(".modalWindow").removeClass("active");
    $("body").removeClass("active");
});//end click

モーダルウィンドウ以外をクリックしても閉じる

モーダルウィンドウが開いている時は画面全体はオーバーレイ要素が覆っているので、このオーバーレイ要素をクリックしたらウィンドウを閉じるようにクリックイベントを追加思案す。

jQuery

//モーダルウインドウ以外をクリックしても閉じる
overRay.on("click",function(){
    //付与したクラスを削除して非表示にする
    $(this).removeClass("active");
    $(".modalWindow").removeClass("active");
    $("body").removeClass("active");
});//end click

その他ウィンドウのサイズ調整などを行い、最終的なjQueryのソースコードは以下のようになりました。

jQuery

$(function(){
    var btn = $(".modalOpen");
    var overRay = $(".modalOverRay");
    //開くをクリックしたら
    btn.on("click",function(){
        //クリックしたボタンの番号データを取得
        var btnNo = $(this).attr("data-number");
        //console.log(btnNo);
        //モーダルウィンドウのサイズを調整
        var modalWindow = $(".modalWindow").height();
        var modalTitle = $(".modalTitle").height();
        var modalBtn = $(".modalBtn").height();
        var mch = modalWindow - modalTitle - modalBtn - 15;
        //console.log(mch);
        var modalContents = $(".modalContents");
        modalContents.css({
            "height":mch + "px",
        });
        //オーバーレイを表示
        overRay.addClass("active");
        //ボタンの番号データを使って開くモーダルウィンドウを指定
        var targetId = "#modal" + btnNo; 
        //モーダルウィンドウを表示
        $(targetId).addClass("active");
        //モーダルウィンドウが開いている時はページのスクロールを不可にする
        $("body").addClass("active");
    });//end click
    //閉じるボタンをクリックしたら
    var closeBtn = $(".modalBtn span");
    closeBtn.on("click",function(){
        //付与したクラスを削除して非表示にする
        overRay.removeClass("active");
        $(".modalWindow").removeClass("active");
        $("body").removeClass("active");
    });//end click
    //モーダルウインドウ以外をクリックしても閉じる
    overRay.on("click",function(){
        //付与したクラスを削除して非表示にする
        $(this).removeClass("active");
        $(".modalWindow").removeClass("active");
        $("body").removeClass("active");
    });//end click
    //OKボタンをクリックした時
    $(".modalWindow .ok").on("click",function(){
        alert("OKボタンが押されました。");
    });//end click
});//end function

プレビュー

まとめ

表示するタイミングなどカスタマイズ次第で色々な機能に活用できます。入力フォームや広告、規約などの確認事項などユーザーに必ず見て欲しいコンテンツはモーダルウィンドウで表示させると効果的です。しかしあまりにも過剰に設置し過ぎるとサイトの閲覧にわずらわしさを感じさせてしまうので、自らが使う立場になって考えて適した場所に使用することをおすすめします。

HTML/CSSブロックコーディングデザインをすらすら再現できる

1冊ですべて身につくJavaScript入門講座