複数モーダルウインドウを切り替えて表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

複数モーダルウインドウを切り替えて表示する方法

複数モーダルウインドウを切り替えて表示する方法を紹介します。横並びに配置した3つのボタンから、それぞれ異なる内容のモーダルウインドウを表示できるサンプルです。クリックしたボタンに応じて、対応するモーダルだけを開けます。

このサンプルはHTML・CSS・JavaScriptのみで動作し、「お知らせ」「プロフィール」「設定」の3つのボタンを用意しています。各ボタンをクリックすると、タイトルや説明文が異なる専用モーダルが表示されます。モーダルは「閉じる」ボタン、右上の「×」ボタン、または背景部分のクリックで閉じられます。

管理画面の項目別説明、会員サイトのプロフィール表示、ECサイトの商品情報、サービス案内など、複数の内容を同じページ内で個別に表示したい場合に利用できます。ボタン名、モーダルタイトル、説明文、色はコード内で変更できるため、用途に合わせてカスタマイズできます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>複数モーダルウインドウの切り替え表示</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 複数モーダルウインドウを開く操作エリア -->
  <div class="multiple-modal-buttons_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="multiple-modal-buttons_title">
      複数モーダルウインドウ
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="multiple-modal-buttons_text">
      3つのボタンから、それぞれ異なるモーダルウインドウを表示します。
    </p>

    <!-- モーダルを開くボタン一覧 -->
    <div class="multiple-modal-buttons_list">

      <!-- お知らせモーダルを開くボタン -->
      <button
        class="multiple-modal-buttons_open"
        type="button"
        data-multiple-modal-buttons-open="notice">
        お知らせ
      </button>

      <!-- プロフィールモーダルを開くボタン -->
      <button
        class="multiple-modal-buttons_open"
        type="button"
        data-multiple-modal-buttons-open="profile">
        プロフィール
      </button>

      <!-- 設定モーダルを開くボタン -->
      <button
        class="multiple-modal-buttons_open"
        type="button"
        data-multiple-modal-buttons-open="settings">
        設定
      </button>

    </div>

  </div>

  <!-- すべてのモーダルで共通使用する背景 -->
  <div
    class="multiple-modal-buttons_overlay"
    data-multiple-modal-buttons-overlay>

    <!-- お知らせモーダル -->
    <div
      class="multiple-modal-buttons_modal"
      data-multiple-modal-buttons-modal="notice"
      role="dialog"
      aria-modal="true"
      aria-labelledby="multiple-modal-buttons-notice-title">

      <!-- お知らせモーダル右上の閉じるボタン -->
      <button
        class="multiple-modal-buttons_close"
        type="button"
        data-multiple-modal-buttons-close
        aria-label="閉じる">
        ×
      </button>

      <!-- お知らせモーダルのタイトル -->
      <div
        class="multiple-modal-buttons_heading"
        id="multiple-modal-buttons-notice-title">
        お知らせ
      </div>

      <!-- お知らせモーダルの説明文 -->
      <p class="multiple-modal-buttons_message">
        新しいお知らせを表示するモーダルウインドウです。
      </p>

      <!-- お知らせモーダル下部の閉じるボタン -->
      <button
        class="multiple-modal-buttons_button"
        type="button"
        data-multiple-modal-buttons-close>
        閉じる
      </button>

    </div>

    <!-- プロフィールモーダル -->
    <div
      class="multiple-modal-buttons_modal"
      data-multiple-modal-buttons-modal="profile"
      role="dialog"
      aria-modal="true"
      aria-labelledby="multiple-modal-buttons-profile-title">

      <!-- プロフィールモーダル右上の閉じるボタン -->
      <button
        class="multiple-modal-buttons_close"
        type="button"
        data-multiple-modal-buttons-close
        aria-label="閉じる">
        ×
      </button>

      <!-- プロフィールモーダルのタイトル -->
      <div
        class="multiple-modal-buttons_heading"
        id="multiple-modal-buttons-profile-title">
        プロフィール
      </div>

      <!-- プロフィールモーダルの説明文 -->
      <p class="multiple-modal-buttons_message">
        ユーザーのプロフィール情報を表示するモーダルウインドウです。
      </p>

      <!-- プロフィールモーダル下部の閉じるボタン -->
      <button
        class="multiple-modal-buttons_button"
        type="button"
        data-multiple-modal-buttons-close>
        閉じる
      </button>

    </div>

    <!-- 設定モーダル -->
    <div
      class="multiple-modal-buttons_modal"
      data-multiple-modal-buttons-modal="settings"
      role="dialog"
      aria-modal="true"
      aria-labelledby="multiple-modal-buttons-settings-title">

      <!-- 設定モーダル右上の閉じるボタン -->
      <button
        class="multiple-modal-buttons_close"
        type="button"
        data-multiple-modal-buttons-close
        aria-label="閉じる">
        ×
      </button>

      <!-- 設定モーダルのタイトル -->
      <div
        class="multiple-modal-buttons_heading"
        id="multiple-modal-buttons-settings-title">
        設定
      </div>

      <!-- 設定モーダルの説明文 -->
      <p class="multiple-modal-buttons_message">
        各種設定内容を案内するモーダルウインドウです。
      </p>

      <!-- 設定モーダル下部の閉じるボタン -->
      <button
        class="multiple-modal-buttons_button"
        type="button"
        data-multiple-modal-buttons-close>
        閉じる
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* 複数モーダルウインドウを開く操作エリア */
.multiple-modal-buttons_wrap{
  max-width:700px; /* 操作エリアの最大横幅 */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 操作エリア内側の余白 */
  border:1px solid #e5e7eb; /* 操作エリアの枠線 */
  border-radius:18px; /* 操作エリアの角丸 */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* 内容を中央揃え */
  box-sizing:border-box; /* paddingと枠線を横幅に含める */
}

/* 操作エリアのタイトル */
.multiple-modal-buttons_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 操作エリアの説明文 */
.multiple-modal-buttons_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

/* モーダルを開くボタン一覧 */
.multiple-modal-buttons_list{
  display:flex; /* 3つのボタンを横並びにする */
  gap:12px; /* ボタン同士の間隔 */
}

/* 各モーダルを開くボタン */
.multiple-modal-buttons_open{
  flex:1; /* 3つのボタンを同じ横幅にする */
  min-height:48px; /* ボタンの最小高さ */
  padding:12px 16px; /* ボタン内側の上下・左右余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* すべてのモーダルで共通使用する背景 */
.multiple-modal-buttons_overlay{
  display:none; /* 初期状態では背景を非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  align-items:center; /* モーダルを縦中央へ配置 */
  justify-content:center; /* モーダルを横中央へ配置 */
  padding:20px; /* 画面端との余白 */
  background:rgba(0,0,0,.6); /* 背景色。.6を大きくすると暗くなる */
  box-sizing:border-box; /* paddingを画面幅に含める */
}

/* モーダル背景の表示状態 */
.multiple-modal-buttons_overlay.is-active{
  display:flex; /* 表示用クラスが付いた時に背景を表示 */
}

/* 各モーダル本体 */
.multiple-modal-buttons_modal{
  display:none; /* 初期状態では各モーダルを非表示 */
  position:relative; /* 閉じるボタンの絶対配置基準 */
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:420px; /* モーダルの最大横幅 */
  padding:48px 28px 28px; /* 上48px・左右28px・下28pxの内側余白 */
  border-radius:18px; /* モーダルの角丸 */
  background:#ffffff; /* モーダルの背景色 */
  box-shadow:0 20px 50px rgba(0,0,0,.25); /* モーダルの影 */
  text-align:center; /* モーダル内の内容を中央揃え */
  box-sizing:border-box; /* paddingを横幅に含める */
}

/* 選択されたモーダルの表示状態 */
.multiple-modal-buttons_modal.is-active{
  display:block; /* 表示用クラスが付いたモーダルだけを表示 */
}

/* モーダル右上の閉じるボタン */
.multiple-modal-buttons_close{
  position:absolute; /* モーダル右上へ配置 */
  top:12px; /* 上端からの位置 */
  right:12px; /* 右端からの位置 */
  width:36px; /* ボタンの横幅 */
  height:36px; /* ボタンの高さ */
  padding:0; /* ボタン内側の余白をなくす */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:50%; /* ボタンを円形にする */
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ×印の文字色 */
  font-size:22px; /* ×印の文字サイズ */
  line-height:1; /* ×印の行間を詰める */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 各モーダルのタイトル */
.multiple-modal-buttons_heading{
  margin:0 0 16px; /* 下側16pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 各モーダルの説明文 */
.multiple-modal-buttons_message{
  margin:0; /* 外側余白をなくす */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

/* モーダル下部の閉じるボタン */
.multiple-modal-buttons_button{
  width:100%; /* モーダル内の横幅いっぱいへ広げる */
  margin-top:28px; /* 上側28pxの余白 */
  padding:12px; /* ボタン内側の余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォン用の操作エリア */
  .multiple-modal-buttons_wrap{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

  /* スマートフォン用のボタン一覧 */
  .multiple-modal-buttons_list{
    flex-direction:column; /* 3つのボタンを縦並びにする */
  }

  /* スマートフォン用のモーダル本体 */
  .multiple-modal-buttons_modal{
    padding:48px 18px 20px; /* 上48px・左右18px・下20pxの余白 */
  }

}

// 各モーダルを開くボタンをすべて取得
const multipleModalButtonsOpenButtons=document.querySelectorAll(
  "[data-multiple-modal-buttons-open]"
);

// 各モーダルの閉じるボタンをすべて取得
const multipleModalButtonsCloseButtons=document.querySelectorAll(
  "[data-multiple-modal-buttons-close]"
);

// すべてのモーダルで共通使用する背景を取得
const multipleModalButtonsOverlay=document.querySelector(
  "[data-multiple-modal-buttons-overlay]"
);

// 3つのモーダル本体をすべて取得
const multipleModalButtonsModals=document.querySelectorAll(
  "[data-multiple-modal-buttons-modal]"
);

// 表示中のモーダルを閉じる共通処理
function closeMultipleModalButtons(){

  // モーダル背景から表示用クラスを削除
  multipleModalButtonsOverlay.classList.remove("is-active");

  // すべてのモーダルから表示用クラスを削除
  multipleModalButtonsModals.forEach(function(modal){
    modal.classList.remove("is-active");
  });

}

// 各モーダルを開くボタンへクリック処理を設定
multipleModalButtonsOpenButtons.forEach(function(button){

  // ボタンをクリックした時
  button.addEventListener("click",function(){

    // クリックしたボタンに設定されたモーダル名を取得
    const modalName=button.dataset.multipleModalButtonsOpen;

    // モーダル名と一致するモーダル本体を取得
    const targetModal=document.querySelector(
      '[data-multiple-modal-buttons-modal="' + modalName + '"]'
    );

    // 別のモーダルが残らないようにすべて非表示
    multipleModalButtonsModals.forEach(function(modal){
      modal.classList.remove("is-active");
    });

    // クリックしたボタンに対応するモーダルを表示
    targetModal.classList.add("is-active");

    // 共通のモーダル背景を表示
    multipleModalButtonsOverlay.classList.add("is-active");

  });

});

// 各閉じるボタンへクリック処理を設定
multipleModalButtonsCloseButtons.forEach(function(button){

  // 閉じるボタンをクリックした時
  button.addEventListener("click",function(){

    // 表示中のモーダルを閉じる
    closeMultipleModalButtons();

  });

});

// モーダル背景をクリックした時
multipleModalButtonsOverlay.addEventListener("click",function(event){

  // モーダル本体ではなく背景部分をクリックした場合だけ閉じる
  if(event.target===multipleModalButtonsOverlay){

    // 表示中のモーダルを閉じる
    closeMultipleModalButtons();

  }

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには3つのボタンと3種類のモーダルウインドウの構造、CSSにはモーダルやボタンのデザイン、JavaScriptにはクリックしたボタンに応じて対応するモーダルだけを表示する処理を記述しています。ライブラリを使用せず、HTML・CSS・JavaScriptだけで動作するため、そのままコピーして利用できます。

3つのボタンはそれぞれ異なるモーダルと関連付けられており、クリックしたボタンに対応する内容だけが表示されます。1つの背景を共通で利用しながら複数のモーダルを管理できるため、ページ内に多くの情報を整理して表示したい場合に便利です。

管理画面の項目説明、サービス紹介、プロフィール表示、商品情報など、ボタンごとに異なる内容を表示したい場面へ簡単に組み込めます。ボタン名やモーダルの内容を変更するだけで、さまざまな用途へ応用できます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html
モーダルを開く3つのボタンと、それぞれに対応するモーダルウインドウのHTML構造を管理します。ボタン名やタイトル、説明文を変更できます。

style.css
ボタン、モーダルウインドウ、背景、余白、角丸、影などのデザインを管理します。

script.js
ボタンごとに対応するモーダルを表示する処理、モーダルを閉じる処理、背景クリック時の閉じる処理を管理します。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開くと動作を確認できます。3つのボタンのいずれかをクリックすると対応するモーダルウインドウが表示され、「閉じる」「×」ボタン、または背景をクリックするとモーダルを閉じます。

カスタマイズできる内容
index.htmlではボタン名、モーダルタイトル、説明文を変更できます。モーダルを追加したい場合はHTMLへ新しいボタンとモーダルを追加します。style.cssではボタン色、モーダルサイズ、背景色、余白、角丸、影などを変更できます。script.jsでは表示するモーダルの切り替え処理や開閉処理を編集できます。

数値調整
style.cssのmax-width:420px;を変更するとモーダルの最大横幅が変わります。padding:48px 28px 28px;を変更するとモーダル内部の余白が変わります。gap:12px;を変更すると3つのボタンの間隔が変わります。border-radius:18px;を変更するとモーダルやボタンの角丸の大きさが変わります。

レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media(max-width:640px)を使用してレスポンシブ対応しています。スマートフォンでは3つのボタンが縦並びになり、モーダルも画面幅に合わせて表示されます。タブレット・PCでも中央に見やすく表示されます。