Modal (öffnen/schließen)

Teil des Abschnitts JavaScript in Aktion 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 auf sich zu ziehen. Es wird oft für Anmeldeformulare, Benachrichtigungen oder Bestätigungen verwendet. So könnte es aussehen:

Wichtige Ideen:

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

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

<!-- Schaltfläche zum Öffnen des modalen Fensters -->
<button onclick="openModal()">Open Modal</button>
<!-- Überlagerung und Inhalt des modalen Fensters -->
<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>

Aufgabe

Einfach

Wir haben eine Webseite mit weltraumthematischen Schaltflächen, die interessante Fakten über den Weltraum in einem modalen Fenster anzeigen. Eine Funktion namens openModal wird ausgelöst, wenn auf eine beliebige Schaltfläche mit Weltraumfakten geklickt wird. Deine Aufgabe ist es, den Code innerhalb von openModal zu schreiben, damit das modale Fenster sichtbar wird.

Setze dazu die Eigenschaft display 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>

  <!-- Schaltflächen, die modale Fenster öffnen -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Überlagerung + Inhalt des modalen Fensters -->
  <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>