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

2024/12/06 に公開

JavaScriptの入門編 programming

※この記事にはプロモーションが含まれています。

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

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

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

この記事の内容！

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

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

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

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

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

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

特徴

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

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

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

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

ポップアップとの違い

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

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

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

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

改訂3版JavaScript本格入門

JavaScriptの文法から現場での書き方まで、1冊でしっかり押さえたい方向けの定番書です。

Amazonで見る

Amazonのアソシエイトとして、当ブログは適格販売により収入を得ています。

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

それでは早速、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を適切に設定しましょう。

まとめ！

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

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

それではまたっ！

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

JavaScriptを、動くものを作りながら基礎から通して学びたい方向けの入門書です。

Amazonで見る

Amazonのアソシエイトとして、当ブログは適格販売により収入を得ています。

＼めちゃくちゃ便利です／

毎日の新着を、通知で受け取る

最新の技術の動きを1分で読める記事にして、毎日お届けします。登録は無料で、いつでもやめられます。

iPhone は「ホーム画面に追加」すると通知を受け取れます

iPhone では、Safari で開いたままだと通知を出せない決まりになっています。このブログをホーム画面に置くと、アプリのように通知が届くようになります。下の5つを順番に行ってください。1分ほどで終わり、料金はかかりません。

共有ボタンを押す

いま見ているこのページのまま、画面のいちばん下を見てください。真ん中にある四角から上向きの矢印が出ているマークが共有ボタンです。これを1回タップします。

下のバーが見えないときは、画面を指で少し下に動かすと出てきます。
「ホーム画面に追加」を選ぶ

画面の下からメニューが出てきます。メニューを指で上に動かして下のほうを表示し、「ホーム画面に追加」（＋のマーク）を探してタップします。

見当たらないときは、メニューの中の「その他」や「…」を押すと出てきます。
右上の「追加」を押す

「ホーム画面に追加」という画面に変わります。名前は「皇帝ペンギン」のままで大丈夫です。右上の「追加」をタップします。
ホーム画面のアイコンから開く

Safari を閉じてホーム画面に戻ると、ペンギンの絵の「皇帝ペンギン」というアイコンが増えています。これをタップして開きます。

ここが大事です。Safari からではなく、必ずこのアイコンから開いてください。
「通知をオンにする」→「許可」

開くと、画面の下に「通知をオンにする」という黄色いボタンが出ます。タップすると確認が出るので、「許可」を選びます。「通知をオンにしました」と出たら完了です。

次の日から、新しい記事が出るたびに通知が届きます。やめたいときは、記事の下の「この端末の通知をやめる」を押すか、アイコンを削除してください。

動画でじっくり学びたい方は YouTube メンバーシップへ。