Modal (abrir/cerrar)

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 3 de 27.

Un modal es una pequeña ventana que aparece «encima» de la página para captar la atención del usuario. Suele usarse para formularios de inicio de sesión, notificaciones o confirmaciones. Así es como puede verse:

Ideas clave:

El modal está oculto de forma predeterminada (display: none).
Al hacer clic en el botón “Open”, se ejecuta la función openModal() → establece display: block.

Dentro del modal, el botón de cierre (×) ejecuta la función closeModal() → establece display: none.
A menudo también puedes hacer que se cierre al hacer clic fuera del modal (sobre la superposición oscura).

<!-- Botón para abrir la ventana modal -->
<button onclick="openModal()">Open Modal</button>
<!-- Capa superpuesta de la ventana modal + contenido -->
<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>

Desafío

Fácil

Tenemos una página web con botones con temática espacial que muestran datos interesantes sobre el espacio en una ventana modal. Una función llamada openModal se activa cuando se hace clic en cualquier botón de datos sobre el espacio. Tu tarea es escribir el código dentro de openModal para que la ventana modal sea visible.

Para hacerlo, establece la propiedad display del elemento con el ID "fact" en "block".

Pruébalo tú mismo

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

  <!-- Botones que abren ventanas modales -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Capa superpuesta + contenido de la ventana modal -->
  <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>