プラグイン無しでシンプルなモーダルウィンドウの実装をする方法【jQuery】

最終更新日：

公開日：2024-12-12

ページ内に広告が含まれています。
プラグイン無しでシンプルなモーダルウィンドウの実装をする方法【jQuery】

Webサイトでは画像の拡大表示や、会員登録関係の画面などでよく使われているモーダルウィンドウ。
今回は、プラグイン無しでシンプルなモーダルウィンドウの実装をする方法を解説していきます。

目次

  1. モーダルウィンドウとは
  2. モーダルウィンドウの作成例
  3. HTML解説
  4. CSS解説
  5. jQuery解説
  6. さいごに

モーダルウィンドウとは

モーダルウィンドウとは、現在の画面の上に新たな画面を表示させて操作が完了するまで他の操作を受け付けなくさせるウィンドウの事を言います。
Webサイトでは、画像の拡大表示や会員登録関係の画面でよく使用されているものになります。

モーダルウィンドウの作成例

最初に今回作成したモーダルウィンドウのコードと、作成したサンプルをご覧ください。

<button class="modal_open">OPEN</button>
<div class="modal">
    <div class="modal_body">
        <div class="modal_content">
            <p>ここにモーダルウィンドウのコンテンツ内容が表示されます。</p>
        </div>
        <button class="modal_close">CLOSE</button>
    </div>
    <div class="modal_bg modal_close"></div>
</div>
button {
    font-size: 1.6rem;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    width: 250px;
    padding: 20px 15px;
    appearance: none;
    display: block;
    border: none;
    border-radius: 50px;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.5s;
}
button:hover {
    opacity: 0.8;
}

.modal_open {
    margin: 40px auto;
    background-color: #8FC051;
}

.modal {
    width: 100%;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.modal_body {
    width: calc(100% - 40px);
    max-width: 1000px;
    max-height: 80%;
    padding: 40px 30px;
    margin: 0 auto;
    border-radius: 6px;
    background-color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%,-50%);
    overflow: auto;
}
button.modal_close {
    margin: 40px auto 0 auto;
    background-color: #202124;
}
.modal_bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
$('.modal_open').on('click',function(){
    $('.modal').fadeIn();
});
$('.modal_close').on('click',function(){
    $('.modal').fadeOut();
});

ここにモーダルウィンドウのコンテンツ内容が表示されます。

上記の「OPEN」ボタンをクリックするとモーダルウィンドウが表示されます。
表示された後は、「CLOSE」ボタンまたは、黒透明の背景をクリックする事でモーダルウィンドウが閉じる仕様となっています。

コードの詳しい解説は以下となりますのでご覧ください。

HTML解説

HTMLの詳しい解説は以下となります。

OPENボタンを作成

以下のコードでモーダルウィンドウを開く為のボタンを作成しています。
buttonタグでなくても大丈夫です。

<button class="modal_open">OPEN</button>

モーダルウィンドウを作成

以下のコードでモーダルウィンドウを作成しています。
各パーツの内容は次項をご覧ください。

<div class="modal">
    <div class="modal_body">
        <div class="modal_content">
            <p>ここにモーダルウィンドウのコンテンツ内容が表示されます。</p>
        </div>
        <button class="modal_close">CLOSE</button>
    </div>
    <div class="modal_bg modal_close"></div>
</div>

モーダルウィンドウの外枠

ここでは、モーダルウィンドウ全体を囲う外枠を作成しています。

<div class="modal">
    ・・・
</div>

モーダルウィンドウのコンテンツとCLOSEボタン

ここでは、モーダルウィンドウのコンテンツ内容と閉じる為のボタンを作成しています。
.modal_content内にコンテンツ内容、.modal_closeが閉じる為のボタンになります。「CLOSE」ボタンはbuttonタグでなくても大丈夫です。

<div class="modal_body">
    <div class="modal_content">
        <p>ここにモーダルウィンドウのコンテンツ内容が表示されます。</p>
    </div>
    <button class="modal_close">CLOSE</button>
</div>

モーダルウインドウの背景

ここでは、モーダルウィンドウの背景(黒透明)を作成しています。

<div class="modal_bg modal_close"></div>

CSS解説

CSSの詳しい解説は以下となります。

OPENボタン

buttonタグのCSSをリセットし、サンプルのようにスタイルを指定しています。
「OPEN」と「CLOSE」ボタンの共通スタイルも含まれています。

button {
    font-size: 1.6rem;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    width: 250px;
    padding: 20px 15px;
    appearance: none;
    display: block;
    border: none;
    border-radius: 50px;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.5s;
}
button:hover {
    opacity: 0.8;
}

.modal_open {
    margin: 40px auto;
    background-color: #8FC051;
}

モーダルウィンドウの外枠

モーダルウィンドウの外枠となります。
幅は100%、高さはウィンドウサイズに合わせてposition: fixed;で配置しz-index: 100;ですべてのコンテンツの前面に出るようにしています。
また、「OPEN」ボタンがクリックされるまで表示しないようにdisplay: none;で非表示にしています。

.modal {
    width: 100%;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

モーダルウィンドウのコンテンツ

最大の幅・高さを指定して画面中央に配置してます。
また、コンテンツ内容が多い場合でも表示されるようにoverflow: auto;でスクロールされるように指定しています。
z-indexプロパティは背景(黒透明)より前面に出るよう値を少し大きく指定しています。

.modal_body {
    width: calc(100% - 40px);
    max-width: 1000px;
    max-height: 80%;
    padding: 40px 30px;
    margin: 0 auto;
    border-radius: 6px;
    background-color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%,-50%);
    overflow: auto;
}

CLOSEボタン

CLOSEボタンのスタイルを指定しています。
「OPEN」ボタンの項目で記述しているbuttonタグのスタイルのリセットも含まれます。

button.modal_close {
    margin: 40px auto 0 auto;
    background-color: #202124;
}

モダールウィンドウの背景

モーダルウィンドウの背景(黒透明)部分のCSSです。
外枠を基準に幅・高さを100%にして、position: absolute;で配置しています。
モーダルウィンドウ内のコンテンツより前面に出ないよに、z-indexプロパティの値を小さくしています。

.modal_bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

jQuery解説

jQueryの詳しい解説は以下となります。

モーダルウィンドウの表示

「OPEN」ボタンをクリック時にモーダルウィンドウをフェードイン(表示)しています。

$('.modal_open').on('click',function(){
    $('.modal').fadeIn();
});

モーダルウィンドウを非表示

「CLOSE」ボタンをクリック時にモーダルウィンドウをフェードアウト(非表示)にしています。
また、HTMLで背景(黒透明)にも同じ.modal_closeというクラスを付与しているので、背景をクリック時にも同じ動作をするようにしています。

$('.modal_close').on('click',function(){
    $('.modal').fadeOut();
});

さいごに

いかがでしたでしょうか。
今回は、プラグイン無しでシンプルなモーダルウィンドウの実装をする方法を解説しました。
モーダルウィンドウを作成する方法はいくつもありますが、出来るだけ簡単にできるようなコードにしてみました。

同じページ内に複数のモーダルウィンドウがある場合は、jQueryの処理やHTMLの構成を少し変更する必要がありますので、また後日詳しく解説いたします。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら。

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP