コピペで完結！モーダルウインドウ#10【複数モーダルを切替】

/* =========================================
  モーダルウインドウ #10（複数モーダルを切替）
  CSSコード全文
  スコープ：#modal10-demo
========================================= */

/* ▼全体ラッパー */
#modal10-demo{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Yu Gothic UI",sans-serif; /* フォント指定 */
  color:#0f172a; /* 基本文字色 */
}

/* ▼ボタン配置用のラッパー */
#modal10-demo .btns{
  display:flex;    /* 横並び */
  gap:12px;        /* ボタン間隔 */
  margin:16px 0;   /* 上下余白 */
}

/* ▼ボタン本体 */
#modal10-demo button{
  padding:8px 14px;           /* 内側余白 */
  border-radius:8px;          /* 角丸 */
  border:1px solid #0b6bff;   /* 枠線（青） */
  background:#fff;            /* 背景色（白） */
  color:#0b6bff;              /* 文字色（青） */
  cursor:pointer;             /* カーソル変更 */
}
#modal10-demo button:hover{
  background:#0b6bff; /* ホバー時背景を青 */
  color:#fff;         /* ホバー時文字色を白 */
}

/* ▼モーダル背景（オーバーレイ） */
#modal10-demo .overlay{
  position:fixed;           /* 画面全体に固定 */
  inset:0;                  /* 四方ゼロで全画面 */
  background:rgba(0,0,0,.55); /* 半透明黒背景 */
  display:none;             /* 初期は非表示 */
  place-items:center;       /* 中央寄せ（Grid利用） */
  z-index:9999;             /* 最前面に配置 */
}
#modal10-demo .overlay.active{ display:grid; }

/* ▼モーダルダイアログ本体 */
#modal10-demo .dialog{
  background:#fff;                             /* 背景白 */
  padding:20px;                                /* 内側余白 */
  border-radius:12px;                          /* 角丸 */
  max-width:420px; width:90%;                  /* 最大幅とレスポンシブ */
  box-shadow:0 20px 40px rgba(0,0,0,.25);      /* 影 */
  transform:translateY(10px);                  /* 初期位置（下へ） */
  opacity:0;                                   /* 初期は透明 */
  transition:.2s;                              /* アニメーション */
}
#modal10-demo .overlay.active .dialog{
  transform:translateY(0); /* 表示時は元位置へ */
  opacity:1;               /* フェードイン */
}

/* ▼閉じるボタン */
#modal10-demo .close-btn{
  margin-top:12px;       /* 上余白 */
  padding:6px 12px;      /* 内側余白 */
  border:none;           /* 枠線なし */
  border-radius:6px;     /* 角丸 */
  background:#0b6bff;    /* 青背景 */
  color:#fff;            /* 白文字 */
  cursor:pointer;        /* カーソル変更 */
}

<!-- =========================================
  モーダルウインドウ #10（複数モーダルを切替）
  HTMLコード全文
========================================= -->

<div id="modal10-demo">

  <!-- ▼ボタン配置エリア -->
  <div class="btns">
    <button data-open="modal1">モーダル1を開く</button>
    <button data-open="modal2">モーダル2を開く</button>
  </div>

  <!-- ▼モーダル1 -->
  <div class="overlay" id="modal1">
    <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="title1">
      <h3 id="title1">モーダル1</h3>
      <p>これは1つ目のモーダルです。</p>
      <button class="close-btn">閉じる</button>
    </div>
  </div>

  <!-- ▼モーダル2 -->
  <div class="overlay" id="modal2">
    <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="title2">
      <h3 id="title2">モーダル2</h3>
      <p>こちらは2つ目のモーダルです。</p>
      <button class="close-btn">閉じる</button>
    </div>
  </div>

</div>

// =========================================
// モーダルウインドウ #10（複数モーダルを切替）
// JSコード全文
// =========================================

(function(){
  'use strict';

  // ▼ルート要素を取得
  const root = document.getElementById('modal10-demo');
  if(!root) return; // 存在しない場合は終了

  // ▼開くボタン群とモーダル群を取得
  const openBtns = root.querySelectorAll('[data-open]'); // data-open属性を持つボタン
  const modals   = root.querySelectorAll('.overlay');    // 全モーダル

  // ▼開く処理
  openBtns.forEach(btn=>{
    btn.addEventListener('click',()=>{
      // ボタンのdata-open属性値をIDに持つモーダルを取得
      const target = document.getElementById(btn.dataset.open);
      if(target) target.classList.add('active'); // activeクラスで表示
      document.body.style.overflow='hidden';     // 背景スクロールを停止
    });
  });

  // ▼閉じる処理
  modals.forEach(modal=>{
    const closeBtn = modal.querySelector('.close-btn'); // 閉じるボタン
    closeBtn.addEventListener('click',()=>close(modal));
    // 背景クリック時にも閉じる
    modal.addEventListener('click',e=>{ if(e.target===modal) close(modal); });
  });

  // ▼共通クローズ関数
  function close(m){
    m.classList.remove('active'); // activeクラスを外して非表示
    document.body.style.overflow=''; // 背景スクロールを復活
  }
})();