Popup e file nativi con l'elemento dialog HTML5

, e il

elementi, ognuno dei quali stabilisce una nuova sezione di contenuto in modo indipendente. Puoi posizionarlo come un figlio del corpo o annidarlo all'interno di un elemento come a

o

-entrambi gli approcci sono validi.

I browser di supporto (Chrome 37+ e Opera 27+) renderanno il

elemento nascosto per impostazione predefinita, rendendolo visibile solo su richiesta con JavaScript mostrare() o ShowModal (), e il vicino() metodo per nasconderlo di nuovo. Solitamente, dovremmo eseguire questo metodo all'interno di a clic evento, così:

var $ accountDelete = $ ('# delete-account'), $ accountDeleteDialog = $ ('# confirm-delete'); $ accountDelete.on ('click', function () $ accountDeleteDialog [0] .showModal ();); $ ('# cancel'). on ('click', function () $ accountDeleteDialog [0] .close ();); 

Il mostrare() v. ShowModal () Metodo

Vale la pena notare che mostrare() e ShowModal () comportarsi in modo diverso.

Il mostrare() il metodo rivela l'elemento in base alla sua posizione nel flusso DOM. Se lo hai aggiunto immediatamente prima del tag di chiusura del corpo, potrebbe apparire nella parte inferiore della pagina web. Dovremmo aggiungere stili personalizzati per regolare la sua posizione, ad esempio, se vogliamo posizionarlo centrato sulla pagina. Questi stili verrebbero in genere utilizzati z-index per impilare l'elemento sopra gli altri elementi, il posizione proprietà impostata su assoluto, insieme a sinistra e superiore.

Il ShowModal () il metodo, d'altra parte, visualizzerà l'elemento come modale. Verrà visualizzato al centro della pagina per impostazione predefinita e risiede nel livello superiore, come l'API fullScreen che impedisce l'interferenza z-index, posizione relativa e overflow dell'elemento genitore.

Nella maggior parte dei casi, è probabile che useremo la praticità di ShowModal () invece del mostrare() metodo.

Personalizzazione degli stili

La finestra di dialogo contiene lo stile predefinito dei browser che può essere facilmente sostituito come la maggior parte degli altri elementi. Ad esempio, è possibile rendere più sottile il bordo della finestra di dialogo, arrotondare gli angoli e aggiungere ombra esterna.

Inoltre, quando il

l'elemento è mostrato come un modale (usando il ShowModal () metodo), abbiamo uno pseudo-elemento aggiuntivo, :: sfondo, a nostra disposizione Il :: sfondo elemento risiede immediatamente sotto la finestra di dialogo, coprendo l'intera finestra e il resto degli elementi sottostanti.

È normale modellare lo sfondo con un colore scuro a bassa opacità, fare clic sul pulsante rosso per vederlo in azione:

Aggiunta di Flair con Transizioni

La personalizzazione degli stili della finestra di dialogo dovrebbe essere semplice, ma cosa ne pensi dell'aggiunta della transizione CSS? Che ne dici di rivelare gradualmente la finestra di dialogo, usando un effetto di ridimensionamento, più o meno come OS X lo fa?

Passo 1

Per cominciare, ridimensioneremo la finestra di dialogo del 90%, specificeremo la transizione e mettiamola fuori dalla vista.

dialog visibilità: nascosta; transform: scale (0.1); transizione: trasformare 200ms;  

Passo 2

Ora definiamo un selettore di classe che ridimensiona la finestra di dialogo fino alla dimensione desiderata e la rende visibile.

dialog.dialog-scale visibility: visible; transform: scale (1);  

Passaggio 3

Il nostro trucco ora è che "manterremo" la finestra di dialogo su piccola scala per alcuni millisecondi prima di aggiungere la classe dialogo scala. Per ottenere ciò utilizziamo JavaScript setTimeout () metodo per aggiungere la classe:

transizione var; $ accountDelete.on ('click', function () $ accountDeleteDialog [0] .showModal (); transition = setTimeout (function () $ accountDeleteDialog.addClass ('dialog-scale');, 0.5);) ; 

Passaggio 4

Non dimentichiamo di rimuovere questa classe e cancellare il timeOut quando la finestra di dialogo è chiusa.

$ ('# cancel'). on ('click', function () $ accountDeleteDialog [0] .close (); $ accountDeleteDialog.removeClass ('dialog-scale'); clearTimeout (transition);); 

Siamo tutti pronti! Puoi dargli un passaggio nella seguente demo:

Avvolgendo

Il

è veramente a portata di mano, anche se ancora molto povero per quanto riguarda il supporto del browser. Se e quando tutti i principali browser l'hanno implementato, saremo meno dipendenti dalle librerie, la nostra struttura dei contenuti sarà più semantica, opportunamente accessibile alla tecnologia assistiva e avremo un modo standard di fornire finestre di dialogo modali.

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

Fino ad allora, puoi utilizzare il polyfill di Google Chrome per simularlo nei browser non di supporto.

Ulteriori risorse

• Specifica elemento di dialogo HTML5
• Supporto browser elemento di dialogo
• Scatole modali e non modali in Web Design
• Cosa potresti non sapere sulla proprietà Z-Index

Web design