Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5
Webdesign

Popup e Modali native utilizzando l'elemento HTML5 "dialog"

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images
HTML5 Form Validation With the “pattern” Attribute

Italian (Italiano) translation by Cristiano Verondini (you can also view the original English article)

Al giorno d'oggi molte attività sul web richiedono l'approvazione esplicita dell'utente per essere completate. Ad esempio un utente potrebbe voler rimuovere un account, cambiare il nome utente ad esso associato o confermare una transazione monetaria.

In questi casi uno degli approcci più seguiti è quello di mostrare all'utente una finestra di dialogo, di solito con due pulsanti che consentono, rispettivamente, di annullare o confermare l'azione. Per anni la creazione di simili elementi di interazione è stata affidata a librerie JavaScript. In questo tutorial cercheremo invece di implementare la funzionalità attraverso l'utilizzo dell'elemento nativo <dialog> (che al momento è però sperimentale).

L'utilizzo dell'elemento "dialog"

L'elemento <dialog> è un elemento HTML5 (per l'esattezza, HTML 5.1). Tale elemento è classificato come elemento "sectioning root". Al pari di altri elementi classificati nello stesso modo quali <body>, <blockquote> e <details> questi elementi creano una nuova sezione di contenuto indipendente dalle altre. Tali elementi possono essere posizionati come discendenti diretti dell'elemento body o innestati all'interno di altri elementi come un <div> o un <section>. Entrambi gli approcci sono validi.

I browser che supportano questo elemento (Chrome 37+ e Opera 27+) procederanno al rendering di <dialog> come elemento nascosto che sarà possibile visualizzare solamente tramite l'esecuzione di codice JavaScript attraverso i metodi show() o showModal(). Sarà poi possibile nascondere l'elemento attraverso il metodo close(). L'utilizzo più comune sarà quello di mostrare l'elemento in seguito ad un evento click in questo modo:

Differenza tra i metodi show() e showModal()

È importante sottolineare che i metodi show() e showModal() hanno due comportamenti differenti.

Il metodo show() si limita a visualizzare l'elemento tenendo presente quella che è la sua posizione all'interno dell'albero DOM. Ad esempio, inserendo l'elemento subito prima del tag di chiusura del body, potrebbe apparire in fondo alla pagina. In questo caso sarebbe necessario aggiungere degli stili particolari per modificare la sua posizione nel caso in cui si desiderasse, ad esempio, visualizzarlo al centro della pagina. Gli stili che dovremmo applicare dovrebbero probabilmente utilizzare la proprietà z-index, in modo da visualizzare l'elemento al di sopra degli altri elementi della pagina, dovrebbero valorizzare la proprietà position con absolute ed inoltre valorizzare correttamente le proprietà left e top.

Il metodo showModal() invece si farà carico di mostrare l'elemento come modale. In questo modo verrà mostrato automaticamente al centro della pagina e sarà inserito nel livello più alto, così come avviene utilizzando le API fullScreen. Così facendo non ci saranno interferenze legate a z-index, posizionamenti relativi ed impostazioni di overflow dell'elemento contenitore.

Questo significa che nella maggior parte dei casi converrà utilizzare il metodo showModal() piuttosto che il metodo show().

Personalizzazione degli stili

Le finestre di dialogo vengono stilizzate utilizzando gli stili di default del browser che possono però essere facilmente modificati al pari di quello che succede con tutti gli altri elementi HTML. È possibile, ad esempio, rendere il bordo della finestra più sottile, rendere gli angoli arrotondati ed aggiungere un'ombreggiatura.

Inoltre, quando l'elemento <dialog> è visualizzato in modalità modale (attraverso il metodo showModal()) è possibile utilizzare un nuovo pseudo-elemento: ::backdrop. Il pseudo-elemento ::backdrop viene posizionato immediatamente sotto la finestra di dialogo e copre tutti gli altri elementi presenti all'interno della finestra del browser.

Solitamente questo elemento viene stilizzato utilizzando un colore di sfondo scuro con un basso valore di opacità. Per vedere un esempio, fai click sul bottone rosso:

Miglioramenti usando le transizioni

La personalizzazione degli stili della finestra di dialogo è un processo semplice che però può essere resa più accattivante attraverso l'uso di transizioni. Ad esempio è possibile mostrare la finestra di dialogo utilizzando un effetto di ingrandimento come avviene sul sistema operativo OS X.

Passo 1

Per cominciare impostiamo la scalatura della finestra di dialogo al 10% ed inseriamo le transizioni. Inoltre impostiamo la visibilità a nascosto per nasconderla. 

Passo 2

Adesso definiamo un selettore che riporti la finestra di dialogo alle dimensioni corrette e la renda visibile.

Passo 3

In questo caso il trucco è quello di mantenere la finestra di dialogo alle dimensioni più piccole per alcuni millisecondi prima di aggiungere la classe dialog-scale. Per ottenere questo effetto utilizziamo la funzione setTimeout():

Passo 4

Non scordiamoci però di rimuovere questa classe e cancellare il timeout quando la finestra di dialogo viene chiusa.

Adesso è tutto pronto! Puoi provare l'effetto nella successiva dimostrazione:

Ricapitolando

L'elemento <dialog> è veramente utile anche se ad oggi è poco supportato dai browser. Se e quando i principali browser offriranno il supporto per questa funzionalità sarà possibile dipendere meno da implementazioni attraverso librerie JavaScript. Sarà invece possibile creare contenuti più semantici e supportare maggiormente le tecnologie assistive. Infine esisterà un modo standard per offrire le funzionalità di finestre modali.

caniuse dialog
http://caniuse.com/#feat=dialog

Finché questo non avverrà sarà comunque possibile utilizzare il polyfill di Google Chrome per simulare le medesime funzionalità nei browser che non hanno un supporto nativo.

Approfondimenti

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.