JavaScriptでカスタムダイアログを作成する方法（モーダルウィンドウ）を初心者向けに解説

By /

こんにちは！この記事では、**JavaScriptでカスタムダイアログ（モーダルウィンドウ）**を作成する方法を初心者の方にもわかりやすく解説します。モーダルウィンドウを使うことで、ユーザーに重要な情報を伝えたり、入力を促すことができます。

モーダルウィンドウとは

モーダルウィンドウとは、現在のページ上に重ねて表示されるダイアログボックスのことです。ユーザーの操作を一時的に制限し、特定のアクションを促す際に使用されます。

メリット：

  • ユーザーの注意を引きやすい
  • ページ遷移なしで情報を表示・入力できる
  • カスタマイズ性が高い

基本的なモーダルの構造

モーダルウィンドウは以下の要素で構成されます。

  • オーバーレイ（背景の暗い部分）
  • モーダルコンテンツ（ウィンドウ本体）
    • ヘッダー（タイトルや閉じるボタン）
    • ボディ（メッセージや入力フォーム）
    • フッター（ボタンなどの操作要素）

HTMLでモーダルの骨組みを作成

まずは、HTMLでモーダルの基本構造を作成します。

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

<!-- オーバーレイとモーダルコンテンツ -->
<div id="modalOverlay" class="modal-overlay">
  <div class="modal-content">
    <span id="closeModal" class="close-button">&times;</span>
    <h2>モーダルウィンドウのタイトル</h2>
    <p>これはモーダルウィンドウのコンテンツです。</p>
  </div>
</div>

ポイント：

  • #openModalボタンをクリックするとモーダルが表示されます。
  • #modalOverlayがオーバーレイ部分で、display: none;で非表示にします。
  • .modal-contentがモーダルの本体部分です。

CSSでモーダルのスタイルを設定

次に、CSSでモーダルの見た目を整えます。

/* オーバーレイのスタイル */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* 初期状態では非表示 */
  justify-content: center;
  align-items: center;
}

/* モーダルコンテンツのスタイル */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 500px;
  position: relative;
}

/* 閉じるボタンのスタイル */
.close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 30px;
  cursor: pointer;
}

ポイント：

  • .modal-overlayにdisplay: flex;を使って中央配置します。
  • 背景を半透明の黒に設定して、オーバーレイ効果を出します。
  • .close-buttonでモーダルを閉じるボタンを作成します。

JavaScriptでモーダルを制御

最後に、JavaScriptでモーダルの開閉機能を実装します。

// 要素の取得
const openModal = document.getElementById('openModal');
const closeModal = document.getElementById('closeModal');
const modalOverlay = document.getElementById('modalOverlay');

// モーダルを開くイベント
openModal.addEventListener('click', () => {
  modalOverlay.style.display = 'flex';
});

// モーダルを閉じるイベント（閉じるボタン）
closeModal.addEventListener('click', () => {
  modalOverlay.style.display = 'none';
});

// モーダルを閉じるイベント（オーバーレイ部分のクリック）
modalOverlay.addEventListener('click', (e) => {
  if (e.target === modalOverlay) {
    modalOverlay.style.display = 'none';
  }
});

ポイント：

  • addEventListenerを使ってクリックイベントを設定します。
  • オーバーレイ部分をクリックしてモーダルを閉じる処理を追加しています。
  • e.targetとmodalOverlayを比較して、コンテンツ部分のクリックを無視します。

実践的な例

入力フォームを含むモーダル

モーダル内にフォームを配置し、ユーザーからの入力を取得できます。

<!-- モーダルコンテンツ内のフォーム -->
<div class="modal-content">
  <span id="closeModal" class="close-button">&times;</span>
  <h2>お問い合わせ</h2>
  <form id="contactForm">
    <label>名前：<input type="text" name="name"></label><br><br>
    <label>メール：<input type="email" name="email"></label><br><br>
    <input type="submit" value="送信">
  </form>
</div>

JavaScriptでフォーム送信を処理

const contactForm = document.getElementById('contactForm');

contactForm.addEventListener('submit', (e) => {
  e.preventDefault(); // デフォルトの送信を防止
  // フォームデータの取得と処理
  const formData = new FormData(contactForm);
  const name = formData.get('name');
  const email = formData.get('email');
  
  alert(`お名前：${name}\nメール：${email}`);
  
  // モーダルを閉じる
  modalOverlay.style.display = 'none';
});

ポイント：

  • フォームの送信イベントをキャプチャし、カスタム処理を行います。
  • FormDataオブジェクトを使って、入力値を取得します。

ライブラリを使ったモーダルの実装

自作のモーダル以外にも、既存のライブラリを使うことで、より高度なモーダルを簡単に実装できます。

例：Bootstrapのモーダル

<!-- ボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  モーダルを開く
</button>

<!-- モーダル -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="modalLabel">モーダルのタイトル</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ここにコンテンツを入れます。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存する</button>
      </div>
    </div>
  </div>
</div>

ポイント：

  • BootstrapのCSSとJavaScriptを読み込む必要があります。
  • データ属性（data-bs-toggleなど）を使って、簡単にモーダルを制御できます。

まとめ

モーダルウィンドウを使うことで、ユーザーに重要な情報を効果的に伝えたり、入力を促すことができます。自作で実装する方法と、ライブラリを使う方法の両方を紹介しました。自分のプロジェクトに合わせて最適な方法を選択しましょう。

よくある質問（FAQ）

Q1: モーダルウィンドウを複数同時に表示できますか？

A: 基本的には避けた方が良いです。ユーザーの混乱を招く可能性があるため、モーダルは一度に一つだけ表示することが推奨されます。

Q2: モーダルの背景をクリックしても閉じないようにできますか？

A: はい、JavaScriptでオーバーレイのクリックイベントを無効にするか、ライブラリの設定で変更できます。

// オーバーレイクリックで閉じないようにする
modalOverlay.removeEventListener('click', /* 関数 */);

Q3: モーダル内にスクロール可能なコンテンツを入れられますか？

A: はい、CSSでoverflowプロパティを設定することで、モーダル内のコンテンツをスクロール可能にできます。

.modal-content {
  max-height: 80vh;
  overflow-y: auto;
}

関連記事

著者について

ウェブ開発者として長年の経験を持ち、初心者にもわかりやすいプログラミング解説を心がけています。

上部へスクロール