【JS&CSS】タブ＆モーダルを組み合わせてお知らせ表示を実装する

<ul class="notice-list">
  <li class="notice-item" data-id="1">お知らせ 1</li>
  <li class="notice-item" data-id="2">お知らせ 2</li>
  <li class="notice-item" data-id="3">お知らせ 3</li>
</ul>

<!-- モーダルウィンドウ -->
<div id="modal" class="modal">
  <div class="modal-content">
    <p id="modal-text"></p>
    <span class="close-btn">閉じる</span>
  </div>
</div>

ul.notice-list {
  list-style-type: none;
  padding: 0;
}

li.notice-item {
  text-decoration: none;
  color: blue;
  cursor: pointer;
  display: block;
}

.notice-item:hover {
  opacity: #f0f0f0;
}

.modal {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 暗転 */
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  text-align: center;
}

.close-btn {
  color: #aaa;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
  color: #000;
}

// お知らせの内容
const noticeContents = {
  1: "Good Morning! お知らせ 1 の内容です。",
  2: "Hello! お知らせ 2 の内容です。",
  3: "Good Evening! お知らせ 3 の内容です。"
};

// モーダル関連要素
const modal = document.getElementById("modal");
const modalText = document.getElementById("modal-text");
const closeBtn = document.querySelector(".close-btn");

// お知らせのクリックイベントの設定
document.querySelectorAll(".notice-item").forEach(item => {
  item.addEventListener("click", () => {
    const id = item.getAttribute("data-id"); // data-idからIDを取得
    modalText.textContent = noticeContents[id]; // お知らせの内容をモーダルに設定
    modal.style.display = "block"; // モーダルを表示
  });
});

// 閉じるボタンをクリックでモーダルを閉じる
closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
});

// モーダル外をクリックしたら閉じる
window.addEventListener("click", (event) => {
  if (event.target === modal) {
    modal.style.display = "none";
  }
});