Modal (abrir/fechar)

Parte da seção JavaScript in Action do Journey de HTML da Coddy — lição 3 de 27.

Um modal é uma pequena janela que aparece “por cima” da página para chamar a atenção do usuário. É frequentemente usado para formulários de login, notificações ou confirmações. É assim que ele pode parecer:

Ideias principais:

O modal está oculto por padrão (display: none).
Clicar no botão “Abrir” executa a função openModal() → define display: block.

Dentro do modal, o botão de fechar (×) executa a função closeModal() → define display: none.
Muitas vezes, você também pode fechá-lo clicando fora do modal (na sobreposição escura).

<!-- Botão para abrir o modal -->
<button onclick="openModal()">Abrir Modal</button>

<!-- Sobreposição do modal + conteúdo -->
<div id="overlay" style="display:none;">
  <div class="modal">
    <span onclick="closeModal()">×</span>
    <p>Esta é uma janela modal.</p>
  </div>
</div>

<script>
  function openModal() {
    document.getElementById("overlay").style.display = "block";
  }
  function closeModal() {
    document.getElementById("overlay").style.display = "none";
  }
</script>

Desafio

Fácil

Temos uma página da web com botões de temática espacial que mostram fatos espaciais interessantes em uma janela modal. Uma função chamada openModal é acionada quando qualquer botão de fato espacial é clicado. Sua tarefa é escrever o código dentro de openModal para que a janela modal se torne visível.

Para fazer isso, defina a propriedade display do elemento com o ID "fact" como "block".

Experimente você mesmo

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