Finestra di dialogo

L'elemento dialog è utile per rappresentare qualsiasi tipo di finestra di dialogo in HTML. Scopri come funziona.

Una finestra di dialogo modale è un tipo speciale di finestra popup su una pagina web che interrompe l'utente per concentrarsi su se stessa. Esistono alcuni casi d'uso validi per la visualizzazione di una finestra di dialogo, ma è necessario valutare attentamente la situazione prima di procedere. Le finestre di dialogo modali costringono gli utenti a concentrarsi su contenuti specifici e, almeno temporaneamente, a ignorare il resto della pagina.

Le finestre di dialogo possono essere modali (è possibile interagire solo con i contenuti della finestra di dialogo) o non modali (è ancora possibile interagire con i contenuti al di fuori della finestra di dialogo). Le finestre di dialogo modali vengono visualizzate sopra il resto dei contenuti della pagina. Il resto della pagina è inattivo e, per impostazione predefinita, oscurato da uno sfondo semitrasparente.

L'elemento HTML semantico <dialog> per creare una finestra di dialogo è dotato di semantica, interazioni da tastiera e tutte le proprietà e i metodi dell'interfaccia HTMLDialogElement.

Finestre di dialogo modali

Ecco un esempio di <dialog> modale. Apri la finestra di dialogo con il pulsante "Apri finestra di dialogo modale". Una volta aperto, puoi chiudere il dialogo in tre modi: con il tasto Esc, inviando un modulo con un pulsante che ha l'attributo formmethod="dialog" impostato (o se il modulo stesso ha l'attributo method="dialog" impostato) e con il metodo HTMLDialogElement.close().

HTMLDialogElement ha tre metodi principali, oltre a tutti i metodi ereditati da HTMLElement.

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

Poiché questo <dialog> è stato aperto con il metodo HTMLDialogElement.showModal(), è una finestra di dialogo modale. L'apertura di una finestra di dialogo modale disattiva e oscura tutto ciò che non è la finestra di dialogo stessa. Se passi il mouse sopra l'interfaccia utente al di fuori della finestra di dialogo, noterai che tutti gli elementi si comportano come se fosse impostato pointer-events: none;; anche il pulsante che apre la finestra di dialogo non reagisce alle interazioni.

Quando la finestra di dialogo viene aperta, lo stato attivo viene spostato al suo interno. Lo stato attivo è impostato sul primo elemento nell'ordine di navigazione sequenziale da tastiera all'interno della finestra di dialogo. Se premi ripetutamente il tasto tab, solo i contenuti all'interno della finestra di dialogo possono ricevere lo stato attivo mentre la finestra di dialogo modale è aperta. Tutto ciò che si trova al di fuori della finestra di dialogo modale è inerte finché la finestra di dialogo è aperta.

Quando una finestra di dialogo viene chiusa, modale o meno, lo stato attivo di selezione torna all'elemento che l'ha aperta. Evita di aprire programmaticamente una finestra di dialogo senza un'azione dell'utente. Se devi farlo, assicurati che lo stato attivo venga ripristinato nella posizione in cui si trovava prima dell'apertura della finestra di dialogo, soprattutto se l'utente chiude la finestra di dialogo senza interagire con essa.

Esiste un attributo globale inert che può essere utilizzato per disattivare un elemento e tutti i relativi elementi secondari, ad eccezione di qualsiasi finestra di dialogo attiva. Quando viene aperta una finestra di dialogo modale utilizzando showModal(), l'inerzia o la disattivazione sono incluse; l'attributo non è impostato in modo esplicito.

Lo sfondo che oscura tutto tranne la finestra di dialogo può essere stilizzato utilizzando lo pseudo-elemento ::backdrop. Lo sfondo viene visualizzato solo quando viene visualizzato un <dialog> con il metodo .showModal(). Questo pseudo-elemento corrisponde a tutti gli sfondi, incluso quello visualizzato quando viene utilizzata l'API Fullscreen, ad esempio quando si guarda un video in modalità a schermo intero che non ha lo stesso formato dello schermo o del monitor.

Finestre di dialogo non modali

HTMLDialogElement.show() apre in modo simile una finestra di dialogo, ma senza aggiungere uno sfondo o causare l'inattività di alcun elemento. Il tasto Esc non chiude le finestre di dialogo non modali. Per questo motivo, è ancora più importante includere un metodo per chiudere la finestra di dialogo non modale. In questo modo, se il pulsante di chiusura si trova all'esterno della finestra di dialogo, il focus si sposterà sull'elemento che ha aperto la finestra di dialogo, il che potrebbe non essere la migliore esperienza utente.

Sebbene un pulsante per chiudere la finestra di dialogo non sia ufficialmente richiesto dalla specifica, consideralo obbligatorio. Il tasto Esc chiude una finestra di dialogo modale, ma non una non modale. Un pulsante visibile in grado di ricevere il focus migliora l'accessibilità e l'esperienza utente.

Chiusura di una finestra di dialogo

Non è necessario utilizzare il metodo HTMLDialogElement.close() per chiudere una finestra di dialogo. Non è necessario JavaScript. Per chiudere <dialog> senza JavaScript, includi un modulo con un metodo di dialogo impostando method="dialog" su <form> o formmethod="dialog" sul pulsante.

Quando un utente invia i dati con il metodo dialog, lo stato dei dati inseriti dall'utente viene mantenuto. Sebbene esista un evento di invio, il modulo viene sottoposto alla convalida dei vincoli (a meno che non sia impostato novalidate), i dati utente non vengono cancellati né inviati. Un pulsante di chiusura senza JavaScript può essere scritto come segue:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Potresti aver notato l'attributo autofocus impostato sulla chiusura <button> in questo esempio. Gli elementi con l'attributo autofocus impostato all'interno di un <dialog> non riceveranno il focus al caricamento della pagina (a meno che la pagina non venga caricata con la finestra di dialogo visibile). Tuttavia, riceveranno lo stato attivo quando la finestra di dialogo viene aperta.

Per impostazione predefinita, quando viene aperta una finestra di dialogo, lo stato attivo viene assegnato al primo elemento selezionabile all'interno della finestra di dialogo, a meno che un elemento diverso all'interno della finestra di dialogo non abbia impostato l'attributo autofocus. L'impostazione dell'attributo autofocus sul pulsante di chiusura garantisce che riceva lo stato attivo quando la finestra di dialogo viene aperta. Tuttavia, l'inclusione di autofocus all'interno di un <dialog> deve essere eseguita solo con molta attenzione. Tutti gli elementi della sequenza che precedono l'elemento messo a fuoco automaticamente vengono ignorati. Approfondiamo questo attributo nella lezione dedicata.

L'interfaccia HTMLDialogElement include una proprietà returnValue. L'invio di un modulo con un method="dialog" imposta returnValue su name, se presente, del pulsante di invio utilizzato per inviare il modulo. Se avessimo scritto <button type="submit" name="toasty">close</button>, il returnValue sarebbe toasty.

Quando viene aperta una finestra di dialogo, è presente l'attributo booleano open, il che significa che la finestra di dialogo è attiva e può essere utilizzata. Quando una finestra di dialogo viene aperta aggiungendo l'attributo open anziché con .show() o .showModal(), la finestra di dialogo non sarà modale. La proprietà HTMLDialogElement.open restituisce true o false, a seconda che la finestra di dialogo sia disponibile per l'interazione, non se sia modale o meno.

Sebbene JavaScript sia il metodo preferito per aprire una finestra di dialogo, l'inclusione dell'attributo open al caricamento della pagina e la sua rimozione con .close() possono contribuire a garantire che la finestra di dialogo sia disponibile anche quando JavaScript non lo è.

Ulteriori dettagli

Non utilizzare tabindex

L'elemento attivato per aprire la finestra di dialogo e il pulsante di chiusura contenuto al suo interno (e possibilmente altri contenuti) possono ricevere lo stato attivo e sono interattivi. L'elemento <dialog> non è interattivo e non riceve il focus. Non aggiungere la proprietà tabindex alla finestra di dialogo stessa.

Ruoli ARIA

Il ruolo implicito è dialog. Se la finestra di dialogo è una finestra di conferma che comunica un messaggio importante che richiede una conferma o un'altra risposta dell'utente, imposta role="alertdialog". La finestra di dialogo deve avere anche un nome accessibile. Se il testo visibile può fornire il nome accessibile, aggiungi aria-labelledby="idOfLabelingText".

Valori predefiniti CSS

Tieni presente che i browser forniscono uno stile predefinito per dialog. Firefox, Chrome ed Edge impostano color: CanvasText; background-color: Canvas; mentre Safari imposta color: black; background-color: white; nei fogli di stile degli user agent. color viene ereditato da dialog e non da body o :root, il che potrebbe essere inaspettato. La proprietà background-color non viene ereditata.

Verifica la tua comprensione

Metti alla prova le tue conoscenze sull'elemento dialog.