Finestra modale (apri/chiudi)

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 3 di 27.

Una finestra modale è una piccola finestra che appare “in primo piano” sulla pagina per attirare l’attenzione dell’utente. Spesso viene usata per moduli di accesso, notifiche o conferme. Ecco come potrebbe apparire:

Idee chiave:

La finestra modale è nascosta per impostazione predefinita (display: none).
Facendo clic sul pulsante “Apri” viene eseguita la funzione openModal() → imposta display: block.

All’interno della finestra modale, il pulsante di chiusura (×) esegue la funzione closeModal() → imposta display: none.
Spesso puoi anche chiuderla facendo clic fuori dalla finestra modale (sullo sfondo scuro).

<!-- Pulsante per aprire la finestra modale -->
<button onclick="openModal()">Open Modal</button>
<!-- Sovrapposizione della finestra modale + contenuto -->
<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>

Sfida

Facile

Abbiamo una pagina web con pulsanti a tema spaziale che mostrano curiosità interessanti sullo spazio in una finestra modale. Una funzione chiamata openModal viene attivata quando si fa clic su un qualsiasi pulsante delle curiosità spaziali. Il tuo compito è scrivere il codice all’interno di openModal in modo che la finestra modale diventi visibile.

Per farlo, imposta la proprietà display dell’elemento con ID "fact" su "block".

Provalo tu

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

  <!-- Pulsanti che aprono le finestre modali -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Livello sovrapposto + contenuto della finestra modale -->
  <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>