Hộp thoại (mở/đóng)

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 3 trên 27.

Hộp thoại là một cửa sổ nhỏ xuất hiện “ở trên” trang để thu hút sự chú ý của người dùng. Hộp thoại thường dùng cho biểu mẫu đăng nhập, thông báo hoặc xác nhận. Hộp thoại có thể trông như thế này:

Ý chính:

Hộp thoại ẩn theo mặc định (display: none).
Nhấp vào nút “Open” sẽ chạy hàm openModal() → đặt display: block.

Bên trong hộp thoại, nút đóng (×) chạy hàm closeModal() → đặt display: none.
Thông thường, bạn cũng có thể đóng hộp thoại bằng cách nhấp vào bên ngoài hộp thoại (trên lớp phủ tối).

<!-- Nút mở cửa sổ bật lên -->
<button onclick="openModal()">Open Modal</button>
<!-- Lớp phủ và nội dung của cửa sổ bật lên -->
<div id="overlay" style="display:none;">
  <div class="modal">
    <span onclick="closeModal()">×</span>
    <p>This is a modal window.</p>
  </div>
</div>
<script>
  function openModal() {
    document.getElementById("overlay").style.display = "block";
  }
  function closeModal() {
    document.getElementById("overlay").style.display = "none";
  }
</script>

Thử thách

Dễ

Chúng ta có một trang web với các nút chủ đề không gian, hiển thị những sự thật thú vị về không gian trong cửa sổ phương thức. Hàm openModal được gọi khi bạn nhấp vào bất kỳ nút sự thật về không gian nào. Nhiệm vụ của bạn là viết code bên trong openModal để cửa sổ phương thức hiển thị.

Để làm việc này, hãy đặt thuộc tính display của phần tử có ID "fact" thành "block".

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Space Facts – Modal Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Space Facts</h1>
  <p>Click the button below to learn something cool about space.</p>

  <!-- Các nút mở hộp thoại -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Lớp phủ + nội dung hộp thoại -->
  <div id="overlay" class="overlay" onclick="closeModal()">
    <div id="fact" class="modal">
      <span class="close-btn" onclick="closeModal()">×</span>
      <h2>Shooting Stars</h2>
      <p>Shooting stars are actually tiny meteors burning up as they enter Earth’s atmosphere.</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>