HTML e CSS

Dialog modale nativo e accessibile

Finestra modale basata sull'elemento HTML dialog, con apertura, chiusura e gestione essenziale del focus.

Quando si usa

Quando devi mostrare conferme, dettagli, avvisi o piccoli moduli senza trasferire l'utente su un'altra pagina.

Perché si usa

L'elemento dialog offre un comportamento nativo, riduce il codice necessario e migliora la gestione della tastiera rispetto a una finestra costruita soltanto con div.

Vantaggi principali

Soluzione riutilizzabile e adattabile
Codice privo di dipendenze esterne
Struttura commentabile e integrabile nel progetto

Anteprima del risultato

Il dialog modale evidenzia un messaggio o una scelta importante senza far uscire l'utente dalla pagina.

Codice completo

Studia il flusso prima di copiarlo e provalo in un ambiente separato. Adatta sempre nomi, selettori, percorsi e controlli al progetto reale.

<button type="button" class="apri-dialogo">Apri dettagli</button>
<dialog id="dialogoInfo" aria-labelledby="titoloDialogo">
  <h2 id="titoloDialogo">Dettagli del servizio</h2>
  <p>Contenuto breve e strettamente collegato all'azione richiesta.</p>
  <form method="dialog">
    <button>Chiudi</button>
  </form>
</dialog>
<script>
const dialogo = document.getElementById('dialogoInfo');
document.querySelector('.apri-dialogo').addEventListener('click', () => dialogo.showModal());
dialogo.addEventListener('click', e => {
  if (e.target === dialogo) dialogo.close();
});
</script>
<style>
dialog{max-width:560px;width:calc(100% - 32px);border:0;border-radius:14px;padding:24px;box-shadow:0 18px 60px rgba(0,0,0,.28)}
dialog::backdrop{background:rgba(12,28,48,.62)}
</style>

Da personalizzare: Testi, larghezza, pulsanti e comportamento del clic sullo sfondo.

Errore da evitare: Non usare la modale per contenuti lunghi o indispensabili alla navigazione; assicurati che sia sempre presente un pulsante di chiusura.