2024/12/06 (更新日:2024/12/06)

【JavaScript】モーダルウィンドウの作り方！【分かりやすい】

Categories > JavaScriptの入門編

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

今回は、モーダルウィンドウの作り方の解説をします！Webサイト制作者なら、よくあるモーダルウィンドウはちゃちゃっと作れてほしいのもです。

そんなモーダルウィンドウですがこの記事では「JavaScript」だけで作る方法の解説をします。なのでライブラリなどは使わない基本的な作り方になりますが、これが最も重要でもあると思います。

この記事の内容！

モーダルウィンドウとは何か？
JavaScriptでモーダルウィンドウを作る方法！

また、下の動画でも「モーダルウィンドウの作り方」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

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

まずはモーダルウィンドウについて簡単に解説します。

「モーダルウィンドウ」とは、ふわっと画面上にでてくる小さなウィンドウのことです。

特徴

「モーダルウィンドウ」の特徴は下記の通りです。

親ウィンドウをロックする
ふわっと画面上にでてくる小さなウィンドウ

モーダルウィンドウが開いている間、親ウィンドウ（背景）の操作ができなくなります。

名前の由来は”modal” は「モードを持つ」という意味。モーダルウィンドウが表示されている間、アプリケーションの状態は「ユーザーの応答待ちモード」になります。

ポップアップとの違い

ポップアップとの違いは下記の通りです。

ポップアップ別ウィンドウとして開き、他のウィンドウと一緒に操作可能

モーダルウィンドウその画面の操作が終わるまで他の操作ができない

例えば、ポップアップは広告表示に使われることが多いのに対し、モーダルウィンドウはログインフォームや確認ダイアログに使われます。

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

それでは早速、JavaScriptを使ったモーダルウィンドウの基本的な作り方をみていきましょう。

<div id="mask" class="hidden"></div>

<div class="container">
    <div class="card hidden">
        <h2>皇帝ペンギンのサブスク！</h2>
        <ul>
            <li>実践的で</li>
            <li>さらに踏み込んだコンテンツが</li>
            <li>約月額1000円で見放題！</li>
            <li>プログラミングを学習するなら</li>
            <li>皇帝ペンギンプログラミング！</li>
            <li>略して「皇プロ！」</li>
        </ul>
        <button id="close">閉じる！</button>
    </div>
</div>

<button id="open">詳しくみる！</button>

@charset "utf-8";

html {
    font-size: 16px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    width: 1000px;
    margin: 200px auto;
}
.card {
    width: 400px;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 30px;
    list-style-position: inside;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    transition-duration: 1s;
    z-index: 2;
}
h2 {
    margin-bottom: 20px;
}
ul {
    margin-bottom: 30px;
}
button {
    all: unset;
    border: 2px solid #333;
    padding: 8px 0;
    text-align: center;
    font-size: 20px;
    width: 200px;
    margin: 0 auto;
    display: block;
    transition-duration: 1s;
    cursor: pointer;
}
#mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    transition-duration: 1s;
    z-index: 1;
}
.hidden {
    display: none;
}

const card = document.querySelector('.card');
const open = document.getElementById('open');
const close = document.getElementById('close');
const mask = document.getElementById('mask');

open.addEventListener('click', () => {
  card.classList.toggle('hidden');
  mask.classList.toggle('hidden');
  open.classList.toggle('hidden');
});

close.addEventListener('click', () => {
  card.classList.toggle('hidden');
  mask.classList.toggle('hidden');
  open.classList.toggle('hidden');
});

これでシンプルなモーダルウィンドウの完成です！

ふわっと表示されるように変更してみる

<div id="mask" class="hidden opacity"></div>

<div class="container">
    <div class="card hidden opacity">
        <h2>皇帝ペンギンのサブスク！</h2>
        <ul>
            <li>実践的で</li>
            <li>さらに踏み込んだコンテンツが</li>
            <li>約月額1000円で見放題！</li>
            <li>プログラミングを学習するなら</li>
            <li>皇帝ペンギンプログラミング！</li>
            <li>略して「皇プロ！」</li>
        </ul>
        <button id="close">閉じる！</button>
    </div>
</div>

<button id="open">詳しくみる！</button>

@charset "utf-8";

html {
    font-size: 16px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    width: 1000px;
    margin: 200px auto;
}
.card {
    width: 400px;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 30px;
    list-style-position: inside;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    transition-duration: 1s;
    z-index: 2;
}
h2 {
    margin-bottom: 20px;
}
ul {
    margin-bottom: 30px;
}
button {
    all: unset;
    border: 2px solid #333;
    padding: 8px 0;
    text-align: center;
    font-size: 20px;
    width: 200px;
    margin: 0 auto;
    display: block;
    transition-duration: 1s;
    cursor: pointer;
}
.hidden {
    display: none;
}
.opacity {
    opacity: 0;
}
#mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    transition-duration: 1s;
    z-index: 1;
}

"use strict";


const card = document.querySelector('.card');
const open = document.getElementById('open');
const close = document.getElementById('close');
const mask = document.getElementById('mask');

let isCardVisible = false;
function toggleCard() {
  if (isCardVisible) {
    card.classList.toggle('opacity');
    setTimeout( () => {
      card.classList.toggle('hidden');
    }, 1000 );
    isCardVisible = false;
  } else {
    card.classList.toggle('hidden');
    setTimeout( () => {
      card.classList.toggle('opacity');
    }, 10 );
    isCardVisible = true;
  }
}
let isMaskVisible = false;
function toggleMask() {
  if (isMaskVisible) {
    mask.classList.toggle('opacity');
    setTimeout( () => {
      mask.classList.toggle('hidden');      
    }, 1000 );
    isMaskVisible = false;
  } else {
    mask.classList.toggle('hidden');
    setTimeout( () => {
      mask.classList.toggle('opacity');
    }, 10 );
    isMaskVisible = true;
  }
}
let isOpenButtonVisible = true;
function toggleOpenButton() {
  if (isOpenButtonVisible) {
    open.classList.toggle('hidden');
    isOpenButtonVisible = false;
  } else {
    open.classList.toggle('hidden');
    isOpenButtonVisible = true;
  }
}

open.addEventListener('click', () => {
  toggleCard();
  toggleMask();
  toggleOpenButton();
});

close.addEventListener('click', () => {
  toggleCard();
  toggleMask();
  toggleOpenButton();
});

作成時のポイント！重なり順（z-index）を調整する

モーダルウィンドウが背景より前面に表示されるよう、z-indexを適切に設定しましょう。

まとめ！

モーダルウィンドウは、ユーザーに特定の情報を強調して伝えたい場合や、確認が必要な場面で非常に便利な機能です。今回紹介した方法を参考に、ぜひご自身のサイト制作に取り入れてみてください！

今後はもっと応用的なモーダルウィンドウの使い方を紹介予定です！お楽しみに！

それではまたっ！