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 ventana pequeña 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 podría verse:

Ideas clave:

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

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

<!-- Botón para abrir la ventana modal -->
<button onclick="openModal()">Open Modal</button>
<!-- Fondo superpuesto + contenido de la ventana modal -->
<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. Se activa una función llamada openModal cuando se hace clic en cualquier botón de datos espaciales. Tu tarea es escribir el código dentro de openModal para que la ventana modal se vuelva 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>