Native Popups og Modals Med HTML5 dialog Element

, og

elementer som hver for seg etablerer et nytt innholdsseksjon uavhengig. Du kan plassere den som et barn i kroppen, eller nest det i et element som a

eller

-begge tilnærmingene er gyldige.

Støttende nettlesere (Chrome 37+ og Opera 27+) vil gjøre

element skjult som standard, bare gjør det synlig på forespørsel med JavaScript ved hjelp av vise fram() eller showModal (), og Lukk() metode for å skjule den igjen. Vanligvis vil vi kjøre denne metoden innenfor a klikk arrangement, slik som:

var $ accountDelete = $ ('# delete-account'), $ accountDeleteDialog = $ ('# bekreft-slett'); $ accountDelete.on ('klikk', funksjon () $ accountDeleteDialog [0] .showModal ();); $ ('# avbryt'). på ('klikk', funksjon () $ accountDeleteDialog [0] .close ();); 

De vise fram() v. showModal () Metode

Det er verdt å merke seg vise fram() og showModal () oppfører seg annerledes.

De vise fram() Metoden avslører elementet i samsvar med sin posisjon i DOM-strømmen. Hvis du la den til umiddelbart før kropps lukkekoden, kan den vises nederst på nettsiden. Vi må legge til tilpassede stiler for å justere posisjonen, for eksempel hvis vi vil legge den sentrert på siden. Disse stilene vil vanligvis bruke z-indeks å stable elementet på toppen av de andre elementene, stilling eiendom satt til absolutte, sammen med venstre og topp.

De showModal () Metoden, derimot, vil vise elementet som en modal. Den vises som standard på midten av siden, og den ligger i topplaget, for eksempel fullskjerm-API som forhindrer interferens av z-indeks, relativ posisjon og overløp av foreldreelementet.

I de fleste tilfeller er det sannsynlig at vi vil bruke bekvemmeligheten av showModal () i stedet for vise fram() metode.

Tilpasse stiler

Dialogboksen bærer nettleserens standard stil som enkelt kan overstyres som de fleste andre elementer. Du kan for eksempel gjøre dialogboksen grense tynnere, gjøre hjørnene avrundet, og legg til dråpeskygge.

I tillegg, når

elementet er vist som en modal (ved hjelp av showModal () metode), har vi et ekstra pseudo-element, :: bakteppe, til vår disposisjon. De :: bakteppe elementet ligger umiddelbart under dialogboksen, som dekker hele visningsporten og resten av elementene under.

Det er vanlig å utforme bakgrunnen med en mørk farge med lav opasitet, og klikk på den røde knappen for å se den i aksjon:

Legge til flair med overganger

Tilpasse dialogboksen stiler bør være grei, men hva med å legge til CSS overgang? Hva med at vi gradvis avslører dialogboksen, ved hjelp av en skaleringseffekt, mer eller mindre hvordan OS X gjør det?

Trinn 1

Til å begynne med skal vi skala dialogen ned med 90%, angi overgangen, og sette den ut av syne.

dialog synlighet: skjult; transformere: skala (0,1); overgang: transformer 200ms;  

Steg 2

Nå definerer vi en klasseväljare som skalere dialogboksen opp til den tilsiktede størrelsen og gjøre den synlig.

dialog.dialog-skala synlighet: synlig; transformere: skala (1);  

Trinn 3

Vårt triks er nå at vi vil "holde" dialogboksen i liten skala i noen millisekunder før vi legger til klassen dialog-skala. For å oppnå dette bruker vi JavaScript setTimeout () metode for å legge til klassen:

var overgang; $ accountDelete.on ('klikk', funksjon () $ accountDeleteDialog [0] .showModal (); overgang = setTimeout (funksjon () $ accountDeleteDialog.addClass ('dialogskala');, 0,5);) ; 

Trinn 4

La oss ikke glemme å fjerne denne klassen og tømme tidenOut når dialogboksen er stengt.

$ ('# avbryt'). på ('klikk', funksjon () $ accountDeleteDialog [0] .close (); $ accountDeleteDialog.removeClass ('dialogskala'); clearTimeout (overgang);); 

Vi er alle satt! Du kan gi det en tur i følgende demonstrasjon:

Wrapping Up

De

er egentlig Hendig, men fortsatt veldig dårlig med hensyn til nettleserstøtte. Hvis og når alle de store nettleserne har implementert det, vil vi være mindre avhengige av biblioteker, vår innholdsstruktur vil være mer semantisk, riktig tilgjengelig for hjelpeteknologi, og vi vil få en standard måte å levere modale dialoger på.

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

Inntil da kan du bruke polyfillet fra Google Chrome for å simulere det i ikke-støttende nettlesere.

Ytterligere ressurser

• HTML5 Dialog Element spesifikasjon
• Dialog Element Browser Support
• Modale og Modeless Bokser i Web Design
• Hva du kanskje ikke vet om Z-indeksen

Webdesign