MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. モーダルウィンドウ

モーダルウィンドウ

JavaScript
2024.05.24

モーダルウィンドウは、ユーザーの注意を引きつけるために画面の中央に表示される小さなウィンドウです。

モーダルウィンドウは
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScriptのリッチなモーダルウィンドウについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <button id="open_modal">モーダルを開く</button>

    <div id="modal" class="modal">
      <div class="modal-content">
        <span id="close_modal" class="close">×</span>
        <p>これはリッチなデザインのモーダルウィンドウです。</p>
      </div>
    </div>

    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
document.addEventListener("DOMContentLoaded", function () {
  const openModal = document.getElementById("open_modal");
  const modal = document.getElementById("modal");
  const closeModal = document.getElementById("close_modal");

  // モーダルを開く
  openModal.addEventListener("click", function () {
    modal.style.display = "flex";
    setTimeout(function () {
      modal.classList.add("show");
    }, 10); // アニメーションを発動させるための微小な遅延
  });

  // モーダルを閉じる
  closeModal.addEventListener("click", function () {
    modal.classList.remove("show");
    setTimeout(function () {
      modal.style.display = "none";
    }, 300); // アニメーションの持続時間と一致させる
  });

  // モーダルの外側をクリックしてモーダルを閉じる
  window.addEventListener("click", function (event) {
    if (event.target === modal) {
      modal.classList.remove("show");
      setTimeout(function () {
        modal.style.display = "none";
      }, 300); // アニメーションの持続時間と一致させる
    }
  });
});
/* モーダルのスタイル */
.modal {
  display: none; /* 初期状態でモーダルを非表示に */
  position: fixed; /* 画面全体に固定 */
  z-index: 1; /* 他のコンテンツの前面に表示 */
  left: 0;
  top: 0;
  width: 100%; /* 画面全体の幅 */
  height: 100%; /* 画面全体の高さ */
  background-color: rgba(0, 0, 0, 0.5); /* 背景を半透明に */
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* フェードイン/アウトのアニメーション */
}

.modal.show {
  opacity: 1; /* 表示時の透明度 */
}

/* モーダルのコンテンツ */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* モーダルの幅 */
  max-width: 500px; /* 最大幅を指定 */
  border-radius: 10px; /* 角を丸くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を付ける */
  transform: translateY(0); /* 初期位置 */
  transition: transform 0.3s ease-in-out; /* スライドインのアニメーション */
}

/* 閉じるボタン */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
JavaScript