JavaScriptモーダルの作り方 - 基礎から実装まで30分でマスター

こんにちは、とまだです。

JavaScriptでモーダルを作ろうとして、「どこから手をつければいいかわからない」と悩んでいませんか？

実は私も最初、モーダルの実装で苦労しました。背景のクリックで閉じる処理や、スクロールの制御など、意外と考えることが多いんですよね。

今回は、JavaScriptのモーダルを「窓」に例えながら、初心者でも必ず作れるように解説していきます。

JavaScriptモーダルとは？窓で理解する基本概念

モーダルって聞くと難しそうですよね。

でも実は、部屋の窓と同じようなものなんです。

普段は閉まっている窓を開けると、外の景色が見えます。 そして、窓を閉じれば元の部屋に戻ります。

JavaScriptのモーダルも同じです。

• 普段は非表示になっている
• ボタンをクリックすると表示される
• 閉じるボタンや背景クリックで元に戻る

つまり、モーダルは「Webページ上に現れる一時的な窓」なんです。

なぜモーダルが必要なのか

「別のページに移動すればいいのでは？」

そう思うかもしれません。

でも、ユーザーの作業を中断させたくない場面ってありますよね。

たとえば、フォーム入力中に利用規約を確認したいとき。 別ページに移動したら、入力内容が消えてしまいます。

モーダルなら、現在の作業を維持したまま、必要な情報を表示できるんです。

実際によく使われる場面は以下の通りです。

• ログインフォーム
• 画像の拡大表示
• 確認ダイアログ
• お知らせやアラート

これらすべて、ユーザー体験を向上させるためにモーダルが活躍しています。

モーダルの基本構造：3つの要素で完成

モーダルを作るには、たった3つの要素があれば十分です。

1. トリガーボタン

モーダルを開くためのボタンです。

これは普通のボタンと同じ。 クリックイベントを設定するだけです。

2. モーダル本体

実際に表示される窓の部分です。

HTMLで枠組みを作り、CSSで見た目を整えます。 最初はdisplay: noneで非表示にしておきます。

3. 背景オーバーレイ

モーダルの後ろを暗くする半透明の幕です。

これがあることで、モーダルに注目が集まります。 映画館で照明を落とすのと同じ効果ですね。

実装前の準備：HTMLとCSSの基礎設計

では、実際にモーダルを作ってみましょう。

まずはHTMLの構造から始めます。

<!-- モーダルを開くボタン -->
<button id="openModal">詳細を見る</button>

<!-- モーダル本体 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>ここにモーダルの内容が入ります</p>
  </div>
</div>

シンプルですよね。 ボタンとモーダルの箱を用意しただけです。

次に、CSSで見た目を整えます。

/* モーダル全体（背景含む） */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* モーダルの内容部分 */
.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 500px;
}

position: fixedで画面に固定し、z-indexで最前面に表示。 これで準備は完了です。

JavaScriptでモーダルを動かす：ステップバイステップ解説

いよいよJavaScriptの出番です。

でも心配しないでください。 必要なのは、たった3つの処理だけです。

ステップ1：要素を取得する

まず、操作したい要素を変数に入れます。

const modal = document.getElementById('modal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementsByClassName('close')[0];

これは、部屋の中から「窓」「開けるボタン」「閉じるボタン」を見つける作業です。

ステップ2：開く処理を追加

ボタンをクリックしたら、モーダルを表示します。

openBtn.addEventListener('click', function() {
  modal.style.display = 'block';
});

display: noneだったモーダルをdisplay: blockに変更。 これだけで表示されます。

ステップ3：閉じる処理を追加

閉じるボタンと背景クリックで閉じる処理です。

// ×ボタンで閉じる
closeBtn.addEventListener('click', function() {
  modal.style.display = 'none';
});

// 背景クリックで閉じる
modal.addEventListener('click', function(event) {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
});

event.target === modalで、背景部分のクリックかを判定。 モーダル内部をクリックしても閉じないようにしています。

よくあるつまずきポイントと解決法

1. スクロールの制御

モーダルが開いている間、背景がスクロールしてしまう問題。

これは本当によくある悩みです。

解決法は、body要素のoverflowを制御すること。

// モーダルを開くとき
document.body.style.overflow = 'hidden';

// モーダルを閉じるとき
document.body.style.overflow = 'auto';

これで背景のスクロールを防げます。

2. ESCキーで閉じる機能

ユーザビリティを考えると、ESCキーでも閉じたいですよね。

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape' && modal.style.display === 'block') {
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
  }
});

キーボードイベントを監視して、ESCキーなら閉じる。 これでより使いやすくなります。

3. アニメーションの追加

パッと表示されるより、ふわっと表示したい。

CSSトランジションを使えば簡単です。

.modal {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.show {
  opacity: 1;
}

JavaScriptではdisplayの代わりにクラスを操作します。

実践的なカスタマイズ例

基本ができたら、用途に合わせてカスタマイズしましょう。

画像ギャラリーモーダル

画像をクリックして拡大表示する場合。

クリックした画像のsrcを取得して、モーダル内に表示。 複数の画像に対応するなら、forループで処理します。

フォーム入力モーダル

お問い合わせフォームなどに使う場合。

フォームの送信処理と組み合わせて実装。 バリデーションも忘れずに追加しましょう。

確認ダイアログモーダル

「本当に削除しますか？」のような確認用。

はい・いいえのボタンを用意して、それぞれに処理を割り当て。 Promiseを使えば、より高度な制御も可能です。

まとめ：モーダルマスターへの第一歩

JavaScriptモーダルの基本をまとめると。

1. HTMLで構造を作る
2. CSSで見た目を整える
3. JavaScriptで動きを追加する

この3つのステップで、必ずモーダルは作れます。

最初は基本的なものから始めて、徐々に機能を追加。 一つずつ理解しながら進めることが大切です。

モーダルが作れるようになると、Webサイトの表現の幅が広がります。

ユーザー体験も向上し、よりプロフェッショナルなサイトに。 ぜひ、今すぐ試してみてください。

ちなみに、JavaScriptの基礎からしっかり学びたい方は、私が運営するLearning Nextのカリキュラムもチェックしてみてください。

DOM操作やイベント処理など、モーダル作成に必要な知識を体系的に学べます。

月額約2,000円で、JavaScriptだけでなくReactやTypeScriptも学び放題。 きっとあなたの学習の助けになるはずです。