Modal (otwieranie/zamykanie)

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 3 z 27.

Okno modalne to małe okno, które pojawia się „na wierzchu” strony, aby przyciągnąć uwagę użytkownika. Często używa się go w formularzach logowania, powiadomieniach lub prośbach o potwierdzenie. Może wyglądać tak:

Kluczowe zagadnienia:

Modal jest domyślnie ukryty (display: none).
Kliknięcie przycisku „Otwórz” uruchamia funkcję openModal() → ustawia display: block.

Wewnątrz okna modalnego przycisk zamykania (×) uruchamia funkcję closeModal() → ustawia display: none.
Często można też zamknąć okno modalne, klikając poza nim (na ciemną nakładkę).

<!-- Przycisk otwierający okno modalne -->
<button onclick="openModal()">Open Modal</button>
<!-- Warstwa nakładki modalnej + zawartość -->
<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>

Wyzwanie

Łatwy

Mamy stronę internetową z przyciskami o tematyce kosmicznej, które pokazują ciekawe fakty o kosmosie w oknie modalnym. Funkcja o nazwie openModal jest wywoływana po kliknięciu dowolnego przycisku z faktem o kosmosie. Twoim zadaniem jest napisać kod wewnątrz openModal, aby okno modalne stało się widoczne.

Aby to zrobić, ustaw właściwość display elementu o identyfikatorze "fact" na "block".

Spróbuj swoich sił

<!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>

  <!-- Przyciski otwierające okna modalne -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Warstwa nakładkowa + zawartość okna modalnego -->
  <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>