Popupuri și modale native Cu elementul dialog HTML5

, si

elemente, fiecare dintre acestea stabilind independent o nouă secțiune de conținut. Puteți să-l plasați ca un copil al corpului sau să îl cuiți într-un element ca a

sau

-ambele abordări sunt valide.

Suportul browserelor (Chrome 37+ și Opera 27+) va reda

element ascuns în mod implicit, făcând-o vizibilă numai la cerere, folosind JavaScript spectacol() sau showModal (), si închide() pentru ao ascunde din nou. De obicei, vom rula această metodă într - un clic eveniment, cum ar fi:

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

spectacol() v. showModal () Metodă

Este demn de remarcat faptul că spectacol() și showModal () se comporta diferit.

spectacol() metoda dezvăluie elementul în funcție de poziția sa în fluxul DOM. Dacă ați adăugat-o imediat înaintea etichetei de închidere a corpului, aceasta poate apărea în partea de jos a paginii Web. Va trebui să adăugăm stiluri personalizate pentru a-și ajusta poziția, de exemplu, dacă vrem să o poziționăm centrat pe pagină. Aceste stiluri ar folosi de obicei z-index pentru a stivui elementul deasupra celorlalte elemente, poziţie proprietate setat la absolut, impreuna cu stânga și top.

showModal () metoda, pe de altă parte, va afișa elementul ca modal. Acesta va fi afișat în centrul paginii în mod implicit și se află în stratul superior, cum ar fi API-ul fullScreen, care împiedică interferența prin z-index, poziția relativă și deversarea elementului părinte.

În cele mai multe cazuri, este probabil că vom folosi comoditatea showModal () in loc de spectacol() metodă.

Personalizarea stilurilor

Caseta de dialog poartă stilul implicit al browserelor, care poate fi ușor înlocuit ca majoritatea celorlalte elemente. Puteți, de exemplu, să faceți fereastra de dialog mai subțire, să faceți colțurile rotunjite și să adăugați umbră.

În plus, atunci când

elementul este prezentat ca modal (folosind showModal () metoda), avem un pseudo-element suplimentar, :: fundal, la dispoziția noastră. :: fundal elementul se află imediat sub caseta de dialog, acoperind întreaga fereastră de vizualizare și restul elementelor dedesubt.

Este obișnuit să stilul fundalului cu o culoare opacitate scăzută - faceți clic pe butonul roșu pentru ao vedea în acțiune:

Adăugarea lui Flair cu tranziții

Particularizarea stilurilor din caseta de dialog trebuie să fie simplă, dar cum să adăugați tranziția CSS? Ce zici de a dezvălui treptat caseta de dialog, utilizând un efect de scalare, mai mult sau mai puțin cum o face OS X?

Pasul 1

În primul rând, vom scala dialogul în jos cu 90%, vom specifica tranziția și l-am scos din vedere.

dialog visibility: hidden; transform: scară (0,1); tranziție: transformare 200 ms;  

Pasul 2

Acum definim un selector de clasă care va scala caseta de dialog până la dimensiunea dorită și o va face vizibilă.

dialog.dialog-scale vizibilitate: vizibil; transformare: scară (1);  

Pasul 3

Noastră truc este acum că vom "ține" caseta de dialog la scară mică pentru câteva milisecunde înainte de a adăuga clasa Scară de dialog. Pentru a realiza acest lucru folosim JavaScript setTimeout () metoda de adăugare a clasei:

var tranziție; $ accountDelete.on ('click', function () $ contDeleteDialog [0] .showModal (); transition = setTimeout (functie () $ accountDeleteDialog.addClass; ; 

Pasul 4

Să nu uităm să eliminăm această clasă și să ștergem timpul de expirare când caseta de dialog este închisă.

$ ('cancelare') pe ('click', functie () $ contDeleteDialog [0] .close (); $ accountDeleteDialog.removeClass ("dialog-scale"); 

Suntem cu toții pregătiți! Puteți da o plimbare în următorul demo:

Înfășurarea în sus

este într-adevăr la îndemână, deși încă foarte slabă în ceea ce privește suportul browserului. Dacă și când toate browserele majore l-au implementat, vom fi mai puțin dependenți de biblioteci, structura noastră de conținut va fi mai semantică, accesibilă în mod corespunzător tehnologiei de asistență și vom avea un mod standard de a furniza dialoguri modale.

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

Până atunci, puteți utiliza polifluziunea din Google Chrome pentru a o simula în browserele care nu sunt compatibile.

Resurse suplimentare

• Specificația elementului de dialog HTML5
• Suport pentru browserul elementului de dialog
• Cutii modale și fără moduri în Web Design
• Ce nu știți despre proprietatea indexului Z

Web design