Modale (ouvrir/fermer)

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 3 sur 27.

Une fenêtre modale est une petite fenêtre qui s'affiche « par-dessus » 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 cela peut ressembler :

Idées clés :

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

À l'intérieur de la fenêtre modale, le bouton de fermeture (×) exécute la fonction closeModal() → définit display: none.
Souvent, vous pouvez également la fermer en cliquant à l'extérieur de la fenêtre modale (sur la superposition sombre).

<!-- Bouton pour ouvrir la fenêtre modale -->
<button onclick="openModal()">Ouvrir la fenêtre modale</button>

<!-- Superposition de la modale + contenu -->
<div id="overlay" style="display:none;">
  <div class="modal">
    <span onclick="closeModal()">×</span>
    <p>Ceci est une fenêtre modale.</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 spatiaux intéressants dans une fenêtre modale. Une fonction appelée openModal est déclenchée lorsqu'un bouton de fait spatial est cliqué. Votre tâche consiste à écrire le code à l'intérieur de openModal pour que la fenêtre modale devienne visible.

Pour ce faire, définissez la propriété display de l'élément avec 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>

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