Modal (öffnen/schließen)

Teil des Abschnitts JavaScript in Action der HTML-Journey von Coddy — Lektion 3 von 27.

Ein Modal ist ein kleines Fenster, das „über“ der Seite erscheint, um die Aufmerksamkeit des Benutzers zu erregen. Es wird oft für Anmeldeformulare, Benachrichtigungen oder Bestätigungen verwendet. So könnte es aussehen:

Kernaussagen:

Das Modal ist standardmäßig ausgeblendet (display: none).
Das Klicken auf die „Öffnen“-Schaltfläche führt die openModal()-Funktion aus → setzt display: block.

Innerhalb des Modals führt die Schließen-Schaltfläche (×) die Funktion closeModal() aus → setzt display: none.
Oft kann man es auch schließen lassen, indem man außerhalb des Modals (auf das dunkle Overlay) klickt.

<!-- Button zum Öffnen des Modals -->
<button onclick="openModal()">Modal öffnen</button>

<!-- Modal-Overlay + Inhalt -->
<div id="overlay" style="display:none;">
  <div class="modal">
    <span onclick="closeModal()">×</span>
    <p>Dies ist ein Modal-Fenster.</p>
  </div>
</div>

<script>
  function openModal() {
    document.getElementById("overlay").style.display = "block";
  }
  function closeModal() {
    document.getElementById("overlay").style.display = "none";
  }
</script>

Aufgabe

Einfach

Wir haben eine Webseite mit Weltraum-Themen-Buttons, die interessante Fakten über den Weltraum in einem Modal-Fenster anzeigen. Eine Funktion namens openModal wird ausgelöst, wenn ein beliebiger Weltraum-Fakten-Button angeklickt wird. Deine Aufgabe ist es, den Code innerhalb von openModal so zu schreiben, dass das Modal-Fenster sichtbar wird.

Setze dazu die display-Eigenschaft des Elements mit der ID "fact" auf "block".

Probier es selbst

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

  <!-- Buttons that open modals -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Overlay + Modal Content -->
  <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>