modal

<span class="open-modal info-link" data-target="infoModal1">モーダルを開く</span>

<!-- オーバーレイ -->
<div id="modalOverlay" class="overlay"></div>

<!-- ポップアップ -->
<div id="infoModal1" class="modal-content" style="display: none;">
    <h3>タイトル</h3>
    <div>
        ここに本文を入力
    </div>
</div>

<!-- 汎用モーダル -->
<div id="genericModal" class="popup">
    <h3 id="modalTitle"></h3>
    <div id="modalBody"></div>
    <button id="closeGenericModal">閉じる</button>
</div>

#modalTitle {
  border-bottom: solid 1px #dee2e6;
  padding: 25px 20px;
  text-align: center;
  margin: 0 !important;
}
#modalBody {
  padding: 20px;
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-width: 600px;
  width: 80%;
}

.popup h3 {
  font-size: 18px;
  color: #333;
}

.popup ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.popup ul li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #555;
}

.popup button {
  display: block;
  max-width: 450px;
  padding: 10px;
  background-color: #0073aa;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 40px;
  margin: 20px auto;
}

.popup button:hover {
  background-color: #005177;
}

/* オーバーレイスタイル */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
  z-index: 999; /* モーダルの後ろに配置するための z-index */
  display: none; /* 初期状態は非表示 */
}

.info-link {
  color: #0073aa;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 10px;
  display: inline-block;
  font-size: 12px;
}

document.addEventListener("DOMContentLoaded", () => {
  // 汎用モーダルとオーバーレイを取得（存在確認付き）
  const overlay = document.getElementById("modalOverlay");
  const modal = document.getElementById("genericModal");
  const modalTitle = document.getElementById("modalTitle");
  const modalBody = document.getElementById("modalBody");
  const closeBtn = document.getElementById("closeGenericModal");

  // モーダルを開く処理
  function openModal(targetId) {
    const content = document.getElementById(targetId);

    if (modal && overlay && modalTitle && modalBody && content) {
      const titleEl = content.querySelector("h3");
      const bodyEl = content.querySelector("div, p, ul");

      modalTitle.innerHTML = titleEl ? titleEl.innerHTML : "";
      modalBody.innerHTML = bodyEl ? bodyEl.innerHTML : "";

      modal.style.display = "block";
      overlay.style.display = "block";
    } else {
      console.warn("モーダル要素またはターゲットが見つかりません:", targetId);
    }
  }

  // モーダルを閉じる処理
  function closeModal() {
    if (modal && overlay) {
      modal.style.display = "none";
      overlay.style.display = "none";
    }
  }

  // モーダルを開くボタンのイベントリスナー（要素存在チェック）
  const modalButtons = document.querySelectorAll(".open-modal");
  if (modalButtons.length > 0) {
    modalButtons.forEach((button) => {
      button.addEventListener("click", () => {
        const targetId = button.getAttribute("data-target");
        openModal(targetId);
      });
    });
  }

  // 閉じるボタンとオーバーレイをクリックした際の処理
  if (closeBtn) {
    closeBtn.addEventListener("click", closeModal);
  }

  if (overlay) {
    overlay.addEventListener("click", closeModal);
  }
});