HTML Tag poco noti...: DIALOG

Oggi esistono molti framework che permettono di costruire un sito o un'app usando linguaggi di alto livello, che quindi prescindono da una conoscenza puntuale di HTML. Tuttavia sapere quali sono le possibilità a propria disposizione è sempre utile ed usare sempre un framework che costruisce le cose significa anche da un lato fidarsi completamente e dall'altro non avere possibilità di introdurre cose nuove.

Con la solito filosofia di scrivere le cose qui allo scopo di ricordarle... riporto alcuni tag poco noti o usati in modo diverso dal solito, cominciando dal primo, di cui fino a poco tempo fa non conoscevo l'esistenza.

Dialog

Per far comparire un dialogo spesso si costruisce un <div> nascosto, cambiandone la visibilità quando necessario, oppure usando l'interfaccia di jQueryUI. È invece possibile fare tutto da HTML + CSS + JS; il codice della pagina si presenta molto semplice; quello che segue mostra un dialogo modale che presenta semplicemente un messaggio:

HTML

<dialog id="dialogo">

<p class="message">Sto avvisando l'utente</p>

<button id="closeButton">Ok, ho capito</button>

</dialog>

Javascript

const dialog = document.getElementById("dialogo");

const openButton = document.getElementById("openButton");

const closeButton = document.getElementById("closeButton");

//evento click di apertura del pulsante esterno al dialogo

openButton.addEventListener("click", () => {

dialog.showModal();

})

//evento click di chiusura del pulsante interno al dialogo

closeButton.addEventListener("click", () => {

dialog.close();

})

Avendo chiamato la .showModal(), il dialogo (alla fine, il browser) impedisce ogni azione sulla pagina sottostante, eliminando la necessità di porre al di sotto uno strato che intercetti il mouse. Se vogliamo che lo sfondo venga in qualche modo nascosto o ridotto in importanza (dato che non è attivo), possiamo usare lo pseudo-elemento ::backdrop; un esempio di foglio di stile minimale:

CSS

#dialogo {

border-radius: 5px;

}

#dialog::backdrop {

opacity: 0.8;

}

Se invece il metodo di apertura fosse stato .show(), allora il dialogo sarebbe stato non modale: la pagina sarebbe stata libera di interagire con l'utente (niente ::backdrop!), con tutti gli eventuali problemi (e soluzioni!) che arrivano in quel modo (tra questi, la necessità di poter individuare bene il dialogo e la possibilità di spostarlo col mouse).

Usare i risultati

Dialoghi con il solo pulsante di chiusura sono utili per comunicare un evento, con la sola necessità di sapere che l'utente l'abbia visto. Ma spesso è necessario avere una risposta dall'utente, per esempio quando ha appena richiesto la cancellazione di un elemento; è allora necessario un ritorno alla chiusura del dialogo.
Questo passaggio avviene tramite la variabile del Dialogo .returnValue: normalmente contiene il pulsante che ha lanciato il metodo .close() del dialogo (cioè il pulsante con cui si è chiuso il dialogo). All'evento di chiusura si otterrà il risultato del dialogo:

Javascript

//evento di chiusura del dialogo

dialog.addEventListener("close", () => {

doSomething(dialog.returnValue) //usiamo il risultato per qualcosa

})

Se abbiamo bisogno di più informazioni oltre al pulsante premuto (magari nel dialogo c'era un campo di testo e un menu) allora all'interno del dialogo dovrà essere previsto un form, che ci aiuterà a riportare indietro tutti i valori che ci servono.

Disponibilità

Il tag dialog e le sue funzionalità sono disponibili dal marzo 2022 e framework non aggiornati non lo usano. Tuttavia, è una funzionalità ormai assodata e accettata da tutti i browser moderni.