Fenêtre modale (ouvrir/fermer)

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 3 sur 27.

Une fenêtre modale est une petite fenêtre qui apparaît « au-dessus » de la page pour attirer l’attention de l’utilisateur. Elle est souvent utilisée pour les formulaires de connexion, les notifications ou les confirmations. Voici à quoi elle peut ressembler :

Idées clés :

La fenêtre modale est masquée par défaut (display: none).
Cliquer sur le bouton « Open » exécute la fonction openModal() → définit display: block.

Dans la fenêtre modale, le bouton de fermeture (×) exécute la fonction closeModal() → définit display: none.
Souvent, tu peux aussi la fermer en cliquant à l’extérieur de la fenêtre modale (sur le voile sombre).

<!-- Bouton pour ouvrir la fenêtre modale -->
<button onclick="openModal()">Open Modal</button>
<!-- Fond de la fenêtre modale + contenu -->
<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>

Défi

Facile

Nous avons une page Web avec des boutons sur le thème de l’espace qui affichent des faits intéressants sur l’espace dans une fenêtre modale. Une fonction appelée openModal est déclenchée lorsqu’on clique sur un bouton d’anecdote sur l’espace. Ta tâche consiste à écrire le code dans openModal afin que la fenêtre modale devienne visible.

Pour ce faire, définis la propriété display de l’élément ayant l’ID "fact" sur "block".

Essayez vous-même

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

  <!-- Boutons qui ouvrent des fenêtres modales -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Superposition + contenu de la fenêtre modale -->
  <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>