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

Kernaussagen:

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

Innerhalb des Modals führt der Schließen-Button (×) die Funktion closeModal() aus → setzt display: none.
Oft kannst du es auch durch einen Klick außerhalb des Modals (auf das dunkle Overlay) schließen.

<!-- 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 Schaltflächen zum Thema Weltraum, die interessante Fakten über den Weltraum in einem modalen Fenster anzeigen. Eine Funktion namens openModal wird ausgelöst, wenn auf eine beliebige Schaltfläche für einen Weltraumfakt geklickt wird. Deine Aufgabe ist es, den Code innerhalb von openModal zu schreiben, sodass das modale 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>