Stili per modal e dialog

L'elemento HTML <dialog> offre un comportamento modale integrato: gestione del focus, chiusura con Escape e API showModal() / close(). Lo definisca con CSS invece di creare da zero l'infrastruttura di un modale personalizzato.

Il pseudo-elemento ::backdrop definisce lo stile dell'overlay dietro un <dialog> aperto. Applichi uno sfondo semitrasparente: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Non è necessario alcun wrapper div.

Centri i dialog con CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. L'uso di margin: auto su un dialog lo posiziona al centro della viewport senza ricorrere al posizionamento tramite JS.

Imposti overflow-y: auto sul dialog stesso per gestire i contenuti lunghi. Imposti overflow: hidden su body quando si apre il modale, per impedire lo scorrimento dello sfondo; aggiunga e rimuova una classe con JavaScript per attivare e disattivare questo comportamento.

Anime l'apertura del dialog usando @starting-style (Chrome 117+) per ottenere animazioni di ingresso gestite solo con CSS, senza JavaScript. Per una compatibilità più ampia, aggiunga una classe open con JavaScript e usi transition su transform e opacity: slide-up da translateY(20px) a translateY(0).

Animare la chiusura di un dialog è complesso: il dialog viene nascosto immediatamente quando si chiama close(). Le soluzioni sono usare la popover API, che supporta nativamente le animazioni di chiusura, oppure intercettare la chiusura con JavaScript, riprodurre la classe dell'animazione di uscita e chiamare close() al termine dell'animazione.

I dialog vengono aperti sopra tutti gli altri contenuti della pagina. Eviti i conflitti tra z-index usando il contesto di impilamento nativo dell'elemento dialog: viene visualizzato nel top layer, sopra tutti i valori CSS di z-index, senza dover impostare z-index direttamente sul dialog.

Sui dispositivi mobili, faccia scorrere i dialog dal basso come una sheet: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. Su desktop, li centri come un modale tradizionale usando il pattern margin: auto.

L'elemento dialog nativo sposta automaticamente il focus sul primo elemento focalizzabile al suo interno quando viene aperto. Si assicuri che all'interno del dialog l'ordine di tabulazione sia logico. Aggiunga un pulsante di chiusura che, alla chiusura del dialog, restituisca il focus all'elemento trigger per garantire una corretta navigazione da tastiera.

Aggiunga aria-labelledby con un riferimento al titolo del dialog e aria-describedby con un riferimento alla descrizione del dialog. Il ruolo del dialog è implicito per <dialog>. I lettori di schermo annunciano queste etichette quando il focus entra nel dialog.

I dialog di conferma devono includere: un titolo con una domanda chiara, una breve descrizione dell'impatto, un pulsante per l'azione distruttiva, rosso e allineato a destra, e un pulsante Annulla, allineato a sinistra o secondario. Usi autofocus sul pulsante Annulla per rendere la scelta sicura l'interazione da tastiera predefinita.

L'elemento dialog nativo, insieme a ::backdrop, al centraggio con margin: auto, al controllo dell'overflow, alle animazioni CSS per l'ingresso e alla gestione del focus, offre un pattern per modali completamente accessibile e gestito tramite CSS. I layout responsive a sheet sui dispositivi mobili e gli attributi ARIA appropriati completano un componente dialog pronto per la produzione.