Native Popups und Modals Mit dem HTML5-Element dialog

, und das

Elemente, von denen jedes unabhängig einen neuen Inhaltsabschnitt festlegt. Sie können es als untergeordnetes Element des Körpers platzieren oder es in einem Element wie einem verschachteln

oder

-Beide Ansätze sind gültig.

Unterstützende Browser (Chrome 37+ und Opera 27+) rendern das

Standardmäßig ausgeblendetes Element, das nur auf Anfrage mit JavaScript sichtbar wird Show() oder showModal (), und das schließen() Methode, um es wieder zu verbergen. Normalerweise würden wir diese Methode innerhalb von ausführen klicken Veranstaltung wie folgt:

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

Das Show() v. showModal () Methode

Das ist es wert, darauf hingewiesen zu werden Show() und showModal () anders verhalten.

Das Show() Methode zeigt das Element entsprechend seiner Position im DOM-Fluss. Wenn Sie es unmittelbar vor dem body close-Tag hinzugefügt haben, wird es möglicherweise am unteren Rand der Webseite angezeigt. Wir müssen angepasste Stile hinzufügen, um seine Position anzupassen, zum Beispiel, wenn wir sie auf der Seite zentrieren möchten. Diese Stile würden normalerweise verwendet z-index um das Element auf die anderen Elemente zu stapeln, das Position Eigenschaft auf festgelegt absolut, zusammen mit links und oben.

Das showModal () Auf der anderen Seite wird das Element als modal angezeigt. Es wird standardmäßig in der Mitte der Seite angezeigt und befindet sich in der obersten Ebene wie die FullScreen-API, die Störungen durch verhindert z-index, relative Position und Überlauf des übergeordneten Elements.

In den meisten Fällen würden wir wahrscheinlich die Bequemlichkeit von nutzen showModal () anstatt der Show() Methode.

Anpassen von Stilen

Das Dialogfeld enthält den Standardstil des Browsers, der wie die meisten anderen Elemente leicht überschrieben werden kann. Sie können beispielsweise den Rand des Dialogfelds dünner machen, die Ecken abgerundet machen und Schlagschatten hinzufügen.

Darüber hinaus, wenn die

Element wird als Modal angezeigt (mit der showModal () Methode) haben wir ein zusätzliches Pseudoelement, ::Hintergrund, zu unserer Verfügung. Das ::Hintergrund Das Element befindet sich unmittelbar unter dem Dialogfeld und deckt das gesamte Ansichtsfenster und die restlichen darunter liegenden Elemente ab.

Es ist üblich, den Hintergrund mit einer dunklen Farbe mit geringer Deckkraft zu gestalten. Klicken Sie auf die rote Schaltfläche, um ihn in Aktion zu sehen:

Flair mit Übergängen hinzufügen

Das Anpassen der Dialogfeldstile sollte unkompliziert sein, aber was ist mit dem Hinzufügen eines CSS-Übergangs? Wie wäre es, wenn wir das Dialogfeld nach und nach anzeigen, indem Sie einen Skalierungseffekt verwenden, so wie OS X es tut?

Schritt 1

Zunächst verkleinern wir den Dialog um 90%, geben den Übergang an und setzen ihn außer Sicht.

Dialog Sichtbarkeit: versteckt; Transformation: Skala (0,1); Übergang: 200ms transformieren;  

Schritt 2

Nun definieren wir einen Klassenselektor, der das Dialogfeld auf die vorgesehene Größe skaliert und sichtbar macht.

dialog.dialog-scale Sichtbarkeit: sichtbar; verwandeln: Skala (1);  

Schritt 3

Unser Trick ist jetzt, dass wir das Dialogfeld für einige Millisekunden auf seiner kleinen Skala „halten“, bevor wir die Klasse hinzufügen Dialogskala. Um dies zu erreichen, verwenden wir JavaScript setTimeout () Methode zum Hinzufügen der Klasse:

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

Schritt 4

Vergessen Sie nicht, diese Klasse zu entfernen und das timeOut zu löschen, wenn das Dialogfeld geschlossen wird.

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

Wir sind alle da! Sie können es in der folgenden Demo mitnehmen:

Einpacken

Das

ist Ja wirklich praktisch, aber immer noch sehr schlecht in Bezug auf die Browserunterstützung. Wenn und wenn alle großen Browser dies implementiert haben, werden wir weniger auf Bibliotheken angewiesen sein, unsere Inhaltsstruktur wird semantischer und für assistive Technologien ordnungsgemäß zugänglich sein, und wir verfügen über eine Standardmethode, modale Dialoge bereitzustellen.

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

Bis dahin können Sie den Polyfill von Google Chrome verwenden, um ihn in nicht unterstützten Browsern zu simulieren.

Weitere Ressourcen

• HTML5-Dialogelementspezifikation
• Unterstützung für Dialogelementbrowser
• Modale und modelllose Boxen im Webdesign
• Was Sie möglicherweise nicht über die Z-Index-Eigenschaft wissen

Web-Design