Dialoghi e modali sono parti integranti della maggior parte delle applicazioni web. Sebbene costruirli a mano non sia un compito complesso, diventa rapidamente noioso per qualsiasi sviluppatore web. La solita alternativa alla loro costruzione a mano è usare un componente costruito da qualcun altro.
Ci sono un paio di problemi con questo approccio, però. Ci sono così tante opzioni che diventa difficile sapere quale componente sarebbe meglio usare e la personalizzazione dell'aspetto di tali componenti a volte può essere noiosa quanto la creazione di una finestra di dialogo a mano. Fortunatamente, c'è un'altra alternativa: l'elemento di dialogo HTML.
Qual è l'elemento di dialogo?
L'elemento di dialogo HTML è un tag HTML integrato (come div o span), che consente agli sviluppatori di creare finestre di dialogo e modali personalizzate. L'elemento di dialogo è presente in Chrome e Opera dal 2014, ma solo di recente è stato supportato da tutti i principali browser.
Perché utilizzare l'elemento di dialogo?
Il motivo principale per utilizzare l'elemento dialog è la comodità. Semplifica la creazione di finestre di dialogo che possono apparire in linea o mostrarsi come modali, con nient'altro che un singolo tag HTML e poche righe di JavaScript.
L'elemento dialog elimina la necessità di creare ed eseguire il debug di una finestra di dialogo personalizzata o di importare il componente di qualcun altro. È anche molto facile dare uno stile con i CSS.
Supporto del browser per l'elemento di dialogo
Sfortunatamente, il supporto del browser per l'elemento dialog potrebbe essere migliore. È supportato nelle ultime versioni di tutti i principali browser a partire da marzo 2022, con alcuni avvertimenti.
Qualsiasi browser Firefox precedente a Firefox 98 lo supporterà solo se abilitato manualmente nelle impostazioni del browser e qualsiasi versione di Safari precedente a Safari 15.4 non lo supporta affatto. I dettagli completi del supporto del browser sono disponibili su posso usare.
Per fortuna, questo non significa che l'elemento dialog sia inutilizzabile. Il team di Google Chrome mantiene un polyfill su cui puoi trovare Github per l'elemento dialog che lo supporta anche su browser dove non è supportato nativamente.
Nella sua forma attuale, l'elemento dialog può avere problemi di accessibilità, quindi potrebbe essere più adatto usare un componente dialog personalizzato come a11y-dialogo nelle applicazioni di produzione.
Come utilizzare l'elemento di dialogo
Per dimostrare come utilizzare l'elemento di dialogo, lo utilizzerai per creare una funzionalità comune del sito Web: una modalità di conferma per un pulsante di eliminazione.
Tutto ciò che è richiesto per seguire è un singolo file HTML.
1. Configura il file HTML
Inizia creando il suddetto file e nominandolo index.html.
Quindi, stabilisci la struttura del file HTML e fornisci alcune meta-informazioni di base sulla pagina, in modo che venga visualizzata correttamente su tutti i dispositivi.
Digita il seguente codice in index.html:
<!DOCTYPE html>
<lingua html="it">
<testa>
<metacarattere="UTF-8">
<meta http-equiv="Compatibile con X-UA" contenuto="IE=bordo">
<metanome="vista" contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0">
<titolo>Dialogo demo</title>
</head><stile></style>
<corpo></body>
<sceneggiatura></script>
</html>
Questa è tutta la configurazione necessaria per questo progetto.
2. Scrivere il markup
Quindi, scrivi il markup per il pulsante di eliminazione, nonché l'elemento di dialogo.
Digita il seguente codice nel tag body di index.html:
<classe div="contenitore a bottone">
<pulsante>
Elimina elemento
</button>
</div>
<dialogo>
<div>
Sei sicuro di volere Eliminaquesto elemento?
</div>
<div>
<classe pulsante="chiudere">
sì
</button>
<classe pulsante="chiudere">
No
</button>
</div>
</dialog>
L'HTML sopra creerà:
- Un pulsante Elimina.
- L'elemento di dialogo.
- Due pulsanti all'interno della finestra di dialogo.
Se index.html è aperto nel tuo browser, l'unico elemento visibile sullo schermo sarà il pulsante di eliminazione. Questo non significa che ci sia qualcosa di sbagliato, l'elemento dialog richiede semplicemente un po' di JavaScript per diventare visibile.
3. Aggiunta di JavaScript
Ora, scrivi il codice che aprirà la finestra di dialogo quando un utente fa clic sul pulsante Elimina, nonché il codice per consentire la chiusura della finestra di dialogo.
Digita quanto segue nel tag di script di index.html:
cost modale = documento.querySelector("dialogo")
document.querySelector(".pulsante pulsante-contenitore".addEventListener("clic", () => {
modale.showModal();
});
cost chiudiBtns = documento.getElementsByClassName("chiudi");
per (btn di closeBtns) {
btn.addEventListener("clic", () => {
modale.chiudere();
})
}Questo codice utilizza il metodo querySelector per ottenere riferimenti ai pulsanti e alla finestra di dialogo. Quindi allega un listener di eventi clic a ciascun pulsante.
Potresti avere familiarità con listener di eventi in JavaScript, che puoi usare tu stesso. Il listener di eventi collegato al pulsante di eliminazione chiama il metodo showModal() per visualizzare la finestra di dialogo quando si fa clic sul pulsante.
Ogni pulsante all'interno del modale ha un listener di eventi collegato ad esso che utilizza il metodo close() per nascondere la finestra di dialogo quando viene fatto clic su di essi.
Anche se non c'è JavaScript che chiama il metodo close() nel codice, gli utenti possono anche chiudere il modale premendo il tasto Esc sulla tastiera.
Ora che questo JavaScript è a posto, se un utente fa clic sul pulsante Elimina, il modale si aprirà e facendo clic sul pulsante Sì o No si chiuderà il modale.
Ecco come dovrebbe apparire il modale aperto:
Una cosa da notare è che l'elemento dialog è già dotato di uno stile, anche se non c'è CSS in index.html. Il modale è già centrato, ha un bordo, la larghezza è limitata al contenuto e ha un riempimento predefinito.
Gli utenti non possono interagire (fare clic, selezionare) con nulla in background mentre il modale è aperto.
L'elemento di dialogo può anche essere visualizzato come parte del flusso della pagina invece che come modale. Per provarlo, cambia il primo listener di eventi in JavaScript in questo modo:
document.querySelector(".pulsante pulsante-contenitore".addEventListener("clic", () => {modal.show(); });L'unica cosa che è cambiata in questo codice è che il codice chiama il metodo show(), invece del metodo showModal(). Ora, quando un utente fa clic sul pulsante Elimina elemento, il modale dovrebbe aprirsi in linea in questo modo:
4. Aggiungi stile
Quindi, personalizza l'aspetto della finestra di dialogo e il suo sfondo scrivendo CSS.
Il CSS ridurrà il bordo della finestra di dialogo, ne limiterà la larghezza massima e quindi scurirà lo sfondo, oltre ad aggiungere un po' di stile ai pulsanti.
Lo stile della finestra di dialogo in sé è semplice, ma la pseudo classe di sfondo è necessaria per aggiungere uno stile mirato allo sfondo della finestra di dialogo.
Incolla il codice seguente nel tag di stile di index.html:
dialogo:: sfondo {
sfondo: nero;
opacità: 0.5;
}
pulsante {
raggio di confine: 2px;
colore di sfondo: bianco;
bordo: 1px nero pieno;
margine: 5px;
box-shadow: 1px 1px 2px grigio;
}
dialogo {
larghezza massima: 90vw;
bordo: 1px nero pieno;
}
Quando la finestra di dialogo è aperta, ora dovrebbe apparire così:
E hai creato una finestra di dialogo completamente funzionale.
L'elemento di dialogo è un ottimo modo per creare modali
Utilizzando l'elemento della finestra di dialogo HTML che ha recentemente ottenuto il supporto in tutti i principali browser, gli sviluppatori Web possono ora creare funzionalità complete, modali e finestre di dialogo facilmente personalizzabili con un tag HTML e poche righe di JavaScript e senza la necessità di affidarsi a terzi soluzione.
L'elemento dialog ha un polyfill gestito dal team di Google Chrome, che consente agli sviluppatori di utilizzare dialog nelle versioni del browser che non lo supportano.
