Finestra di dialogo

L'elemento finestra di dialogo è 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: un popup che interrompe l'attenzione dell'utente su se stessa. Esistono alcuni casi d'uso validi per la visualizzazione di una finestra di dialogo, ma prima di farlo è necessario valutare attentamente la situazione. 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 (con cui è possibile interagire solo con i contenuti della finestra di dialogo) o non modali (è comunque possibile interagire) con contenuti esterni alla finestra di dialogo). Le finestre di dialogo modali vengono visualizzate sopra il resto dei contenuti della pagina. Il resto della pagina è inerte e, per impostazione predefinita, oscurata da uno sfondo semitrasparente.

L'elemento HTML semantico <dialog> per creare una finestra di dialogo è dotato di semantica, interazioni con la 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 aperta, la finestra di dialogo può essere chiusa in tre modi: utilizzando il tasto Esc, inviando un modulo con un pulsante con le formmethod="dialog" (o se nel modulo stesso è impostato method="dialog") e 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 tramite il metodo HTMLDialogElement.showModal(), si tratta di una finestra di dialogo modale. L'apertura di una finestra di dialogo modale disattiva e oscura tutto tranne la finestra di dialogo stessa. Se passa il mouse sopra l'interfaccia utente al di fuori della finestra di dialogo, noterai che tutti gli elementi si comportano come se pointer-events: none; è stata impostata. anche il pulsante che apre la finestra di dialogo non reagisce alle interazioni.

Quando la finestra di dialogo è aperta, lo stato attivo si sposta all'interno della finestra. Lo stato attivo viene impostato sul primo elemento nell'ordine di navigazione sequenziale della tastiera all'interno della finestra di dialogo. Se premi ripetutamente il tasto tab, noterai che solo i contenuti all'interno della finestra di dialogo possono essere attivati, mentre la finestra di dialogo modale è aperta. Tutto ciò che è esterno alla finestra di dialogo modale è inerte finché la finestra di dialogo è aperta.

Quando una finestra di dialogo viene chiusa, modale o meno, lo stato attivo viene restituito all'elemento che ha aperto la finestra di dialogo. Se utilizzi in modo programmatico apri una finestra di dialogo non basata sull'azione dell'utente, riconsidera. Se necessario, assicurati che lo stato attivo venga ripristinato al valore precedente all'apertura della finestra di dialogo, soprattutto se l'utente chiude la finestra di dialogo senza interagire con essa.

Esiste un attributo inert globale che può essere utilizzato per disattivare un elemento e tutti i suoi discendenti, ad eccezione di quelli attivi . Quando viene aperta una finestra di dialogo modale utilizzando showModal(), l'inerzia o la disattivazione è gratuita; l'attributo non è impostato esplicitamente.

Per lo sfondo che oscura tutto tranne la finestra di dialogo puoi applicare uno stile utilizzando ::backdrop pseudo-elemento. Lo sfondo viene visualizzato solo quando viene visualizzato un elemento <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 le stesse proporzioni dello schermo o del monitor.

Finestre di dialogo non modali

In modo simile, HTMLDialogElement.show() apre una finestra di dialogo, ma senza aggiungere uno sfondo o rendere inerte qualsiasi elemento. Il tasto Esc non chiude le finestre di dialogo non modali. Per questo motivo, è ancora più importante assicurarsi di includere un metodo per chiudere la finestra di dialogo non modale. In questo modo, se più vicino è al di fuori della finestra di dialogo, lo stato attivo verrà impostato sull'elemento. che ha aperto la finestra di dialogo, che potrebbe non essere la migliore esperienza utente.

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

Chiusura di una finestra di dialogo

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

Quando un utente effettua l'invio con il metodo dialog, lo stato dei dati inseriti dall'utente viene mantenuto. Mentre è presente un evento di invio, il modulo viene sottoposto alla convalida del vincolo (a meno che non venga impostato novalidate): i dati utente non vengono né 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 alla chiusura <button> in questo esempio. Gli elementi con l'attributo autofocus impostato in un elemento <dialog> non verranno ricevuti Imposta lo stato attivo sul caricamento della pagina (a meno che la pagina non venga caricata e la finestra di dialogo sia visibile). Tuttavia, acquisiranno lo stato attivo quando la finestra di dialogo viene aperta.

Per impostazione predefinita, quando viene aperta una finestra di dialogo, lo stato attivo viene impostato sul primo elemento attivabile al suo interno, a meno che un altro elemento all'interno della finestra di dialogo non abbia l'attributo autofocus impostato. 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 in un <dialog> deve essere fatta con molta attenzione. Tutti gli elementi nella sequenza precedenti all'elemento attivo automaticamente vengono ignorati. Questo attributo verrà approfondito nella lezione principale.

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

Quando una finestra di dialogo è aperta, è presente l'attributo booleano open, il che significa che la finestra di dialogo è attiva e con essa è possibile interagire. Quando viene aperta una finestra di dialogo aggiungendo invece l'attributo open che tramite .show() o .showModal(), la finestra di dialogo sarà senza moda. La HTMLDialogElement.open restituisce true o false, a seconda che la finestra di dialogo sia disponibile per l'interazione, indipendentemente dal fatto che 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 successiva rimozione con .close() può contribuire ad assicurare che la finestra di dialogo sia disponibile anche quando JavaScript non è attivo.

Ulteriori dettagli

Non usare tabindex

L'elemento attivato per aprire la finestra di dialogo e il pulsante di chiusura al suo interno (ed eventualmente altri contenuti) possono ricevere sono coinvolgenti e sono interattivi. L'elemento <dialog> non è interattivo e non riceve lo stato attivo. 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 in cui viene comunicato un messaggio importante che richiede una conferma o una risposta di un altro utente. Imposta role="alertdialog". Anche la finestra di dialogo deve avere un nome accessibile. Se il testo visibile può fornire il nome accessibile, aggiungi aria-labelledby="idOfLabelingText".

Impostazioni predefinite CSS

Tieni presente che i browser forniscono lo stile predefinito per dialog. Firefox, Chrome ed Edge impostano color: CanvasText; background-color: Canvas; e 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.

Verificare di aver compreso

Verifica le tue conoscenze dell'elemento della finestra di dialogo.