Native Popups en Modals Met het HTML5 dialog Element

, en de

elementen, die elk onafhankelijk een nieuwe inhoudssectie vormen. Je kunt het plaatsen als een kind van het lichaam, of nestelen in een element als een

of

-beide benaderingen zijn geldig.

Ondersteunende browsers (Chrome 37+ en Opera 27+) zullen het

element is standaard verborgen, waardoor het alleen op verzoek zichtbaar is met gebruik van JavaScript laten zien() of showModal (), en de dichtbij() methode om het opnieuw te verbergen. Meestal zouden we deze methode uitvoeren binnen een Klik evenement, zoals zo:

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

De laten zien() v. showModal () Methode

Het is vermeldenswaard dat laten zien() en showModal () zich anders gedragen.

De laten zien() methode onthult het element in overeenstemming met zijn positie in de DOM-stroom. Als u het vlak voor de body closing-tag hebt toegevoegd, kan dit onderaan de webpagina worden weergegeven. We zouden aangepaste stijlen moeten toevoegen om de positie aan te passen, bijvoorbeeld als we deze op de pagina gecentreerd willen plaatsen. Deze stijlen zouden meestal worden gebruikt z-index om het element op de andere elementen te stapelen, de positie eigenschap ingesteld op absoluut, samen met links en top.

De showModal () methode, daarentegen, zal het element weergeven als een modaal. Het wordt standaard in het midden van de pagina weergegeven en bevindt zich in de bovenste laag, zoals de fullScreen API die interferentie door z-index, relatieve positie en overloop van het ouderelement.

In de meeste gevallen is het waarschijnlijk dat we het gemak van showModal () in plaats van de laten zien() methode.

Stijlen aanpassen

Het dialoogvenster bevat de standaardstijl van de browser, die eenvoudig kan worden overschreven zoals de meeste andere elementen. U kunt het dialoogvenster bijvoorbeeld dunner maken, de hoeken afgerond maken en slagschaduw toevoegen.

Bovendien, wanneer het

element wordt weergegeven als een modaal (met behulp van de showModal () methode), hebben we een extra pseudo-element, :: backdrop, tot onze beschikking. De :: backdrop element bevindt zich onmiddellijk onder het dialoogvenster, dat de hele viewport en de rest van de elementen eronder bedekt.

Het is gebruikelijk om de achtergrond op te maken met een donkere kleur met lage dekking. Klik op de rode knop om deze in actie te zien:

Flair toevoegen met overgangen

Het aanpassen van de dialoogvensterstijlen moet eenvoudig zijn, maar hoe zit het met het toevoegen van CSS-overgangen? Hoe zit het met het geleidelijk onthullen van het dialoogvenster, met behulp van een schaaleffect, min of meer hoe OS X het doet?

Stap 1

Om te beginnen zullen we de dialoog met 90% verkleinen, de overgang specificeren en uit het zicht plaatsen.

dialoogvenster visibility: hidden; transformatie: schaal (0.1); overgang: transformeer 200ms;  

Stap 2

Nu definiëren we een klassenkiezer die het dialoogvenster schaalt tot de beoogde grootte en zichtbaar maakt.

dialog.dialog-scale visibility: visible; transformeren: schaal (1);  

Stap 3

Onze truc is nu dat we het dialoogvenster op kleine schaal een paar milliseconden "vasthouden" voordat we de klasse toevoegen dialog-schaal. Om dit te bereiken gebruiken we JavaScript's setTimeout () methode om de klasse toe te voegen:

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

Stap 4

Laten we niet vergeten om deze klasse te verwijderen en de timeOut te wissen wanneer het dialoogvenster gesloten is.

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

We zijn er allemaal klaar voor! Je kunt het een ritje geven in de volgende demo:

Afsluiten

De

is werkelijk handig, maar nog steeds erg slecht met betrekking tot browserondersteuning. Als en wanneer alle grote browsers het hebben geïmplementeerd, zullen we minder afhankelijk zijn van bibliotheken, onze inhoudsstructuur zal meer semantisch zijn, goed toegankelijk voor ondersteunende technologie, en we zullen een standaardmanier hebben voor het leveren van modale dialogen.

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

Tot die tijd kunt u de polyfill van Google Chrome gebruiken om het te simuleren in niet-ondersteunende browsers.

Verdere bronnen

• HTML5 Dialog Element Specification
• Dialoogvenster Browserondersteuning
• Modal en Modeless Boxes in Web Design
• Wat u misschien niet weet over de Z-Index-eigenschap

Web ontwerp