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 zu gewinnen. Es wird häufig für Anmeldeformulare, Benachrichtigungen oder Bestätigungen verwendet. So könnte es aussehen:

Wichtige Ideen:

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

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

<!-- Schaltfläche zum Öffnen des Modalfensters -->
<button onclick="openModal()">Open Modal</button>
<!-- Überlagerung des Modalfensters + Inhalt -->
<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 weltraumbezogenen Schaltflächen, die interessante Fakten über den Weltraum in einem modalen Fenster anzeigen. Eine Funktion namens openModal wird aufgerufen, wenn auf eine beliebige Schaltfläche mit einem Weltraumfakt 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>

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