Modal (abrir/cerrar)

Parte de la sección JavaScript in Action 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. A menudo se utiliza para formularios de inicio de sesión, notificaciones o confirmaciones. Así es como puede verse:

Ideas clave:

El modal está oculto por defecto (display: none).
Al hacer clic en el botón “Abrir” 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 haciendo clic fuera del modal (en la capa superpuesta oscura).

<!-- Botón para abrir el modal -->
<button onclick="openModal()">Abrir Modal</button>

<!-- Superposición del modal + contenido -->
<div id="overlay" style="display:none;">
  <div class="modal">
    <span onclick="closeModal()">×</span>
    <p>Esta es una ventana modal.</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 de 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 espaciales. Tu tarea es escribir el código dentro de openModal para que la ventana modal sea visible.

Para hacer esto, establece la propiedad display del elemento con el ID "fact" a "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>

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