So verwenden Sie das HTMLlt;dialog>-Element

In der Frontend-Entwicklung ist das Erstellen oder Verwenden vorgefertigter UI-Komponenten eine häufige Aufgabe. Diese Komponenten weisen jedoch häufig Einschränkungen auf. Sie sind typischerweise an bestimmte Frameworks gebunden und erfordern eine komplexe, nicht standardisierte Logik. Lange Zeit basierten grundlegende UI-Komponenten wie Dialogfenster auf benutzerdefinierten Implementierungen oder, in einfacheren Fällen, integrierten JavaScript-Methoden wie Alert(), Prompt() und Confirm().

Die gute Nachricht ist, dass Sie diese Komponente jetzt mit dem nativen

implementieren können. HTML-Element, das Teil des HTML5-Standards ist und von allen modernen Browsern vollständig unterstützt wird.

Der

Das im Mai 2013 im Rahmen eines W3C-Arbeitsentwurfs eingeführte HTML-Tag wurde zusammen mit interaktiven Elementen wie

und um häufige UI-Herausforderungen anzugehen.

wurde 2014 veröffentlicht. wurde zunächst nur in Google Chrome und Opera unterstützt. Volle Unterstützung für

in Firefox und Safari kam erst im März 2022, was die Einführung in Produktionsprojekten verzögerte. Mit über zwei Jahren Unterstützung durch die wichtigsten Browser ist der

Das Element ist jetzt stabil genug, um das benutzerdefinierte

zu ersetzen

Lassen Sie uns die Funktionen von

erkunden. ausführlicher.

Kernaspekte der Nutzung

Der HTML-

-Tag erstellt ein standardmäßig ausgeblendetes Dialogfeld, das entweder als Popup oder als modales Fenster funktionieren kann.

Popups werden häufig verwendet, um einfache Benachrichtigungen anzuzeigen, wie z. B. Cookie-Meldungen, verschwindende Toast-Benachrichtigungen, Tooltips oder Kontextmenüelemente, die mit der rechten Maustaste angeklickt werden.

Modale Fenster helfen Benutzern, sich auf bestimmte Aufgaben zu konzentrieren, z. B. Benachrichtigungen und Warnungen, die eine Benutzerbestätigung erfordern, komplexe interaktive Formulare und Leuchtkästen für Bilder oder Videos.

Popups verhindern nicht die Interaktion mit der Seite, während modale Fenster das Dokument überlagern, den Hintergrund abdunkeln und andere Aktionen blockieren. Dieses Verhalten funktioniert ohne zusätzliche Stile oder Skripte; Der einzige Unterschied besteht in der Methode zum Öffnen des Dialogs.

Methoden zum Öffnen von Dialogfenstern

– Popup:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

– modales Fenster:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

In beiden Fällen ist das Öffnen des Tag setzt sein open-Attribut auf true. Wenn Sie es direkt festlegen, wird das Dialogfeld als Popup und nicht als modales Fenster geöffnet. Zum Rendern modaler Fenster müssen Sie die entsprechende Methode verwenden. Zum Erstellen eines zunächst geöffneten Popups ist kein JavaScript erforderlich.

<dialog open>Hi, I'm a popup!</dialog>

Probieren Sie es aus:

• Öffnen eines Popups mit der .show()-Methode: https://codepen.io/alexgriss/pen/zYeMKJE
• Öffnen eines modalen Fensters mit der Methode .showModal(): https://codepen.io/alexgriss/pen/jOdQMeq
• Direktes Ändern des offenen Attributs: https://codepen.io/alexgriss/pen/wvNQzRB

Ansätze zum Schließen des Dialogfensters

Dialogfenster schließen auf die gleiche Weise, unabhängig davon, wie sie geöffnet wurden. Hier sind einige Möglichkeiten, ein Popup- oder modales Fenster zu schließen:

– mit der .close()-Methode:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

– durch Auslösen des Submit-Ereignisses in einem Formular mit dem Attribut method="dialog":

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

– durch Drücken der Esc-Taste:

Das Schließen mit Esc funktioniert nur für modale Fenster. Es löst zuerst das Abbruchereignis aus und schließt es dann, sodass Benutzer problemlos vor nicht gespeicherten Änderungen in Formularen gewarnt werden können.

Probieren Sie es aus:

• Schließen eines Dialogfelds mit der Close-Methode: https://codepen.io/alexgriss/pen/GRzwjaV
• Schließen eines Dialogfelds über das Absendeformular: https://codepen.io/alexgriss/pen/jOdQVNV
• Schließen eines modalen Fensters mit der Esc-Taste: https://codepen.io/alexgriss/pen/KKJrNKW
• Verhindern, dass ein modales Fenster mit Esc geschlossen wird: https://codepen.io/alexgriss/pen/mdvQObN

Rückgabewert beim Schließen

Wenn Sie einen Dialog mit einem Formular schließen, das das Attribut method="dialog" verwendet, können Sie den Wert der Schaltfläche „Senden“ erfassen. Dies ist nützlich, wenn Sie basierend auf der angeklickten Schaltfläche unterschiedliche Aktionen auslösen möchten. Der Wert wird in der Eigenschaft returnValue gespeichert.

Probieren Sie es aus: https://codepen.io/alexgriss/pen/ZEwmBKx

Ein genauerer Blick darauf, wie es funktioniert

Lassen Sie uns tiefer in die Mechanik des Dialogfensters und die Details seiner Browser-Implementierung eintauchen.

Die Mechanik eines Popups

Öffnen eines als Popup mit .show() oder dem open-Attribut positioniert es automatisch mit position: absolute im DOM. Grundlegende CSS-Stile wie Ränder und Rahmen werden auf das Element angewendet, und das erste fokussierbare Element im Fenster erhält durch das Autofokus-Attribut automatisch den Fokus. Der Rest der Seite bleibt interaktiv.

Die Mechanik eines modalen Fensters

Ein modales Fenster ist komplexer gestaltet und funktioniert komplexer als ein Popup.

Dokumentüberlagerung

Beim Öffnen eines modalen Fensters mit .showModal() wird der

Das Element wird in einer speziellen HTML-Ebene gerendert, die den gesamten sichtbaren Bereich der Seite abdeckt. Diese Ebene wird als oberste Ebene bezeichnet und vom Browser gesteuert. In einigen Browsern wie Google Chrome wird jedes Modal in einem separaten DOM-Knoten innerhalb dieser Ebene gerendert, der im Elementinspektor sichtbar ist.

Das Konzept der Ebenen bezieht sich auf den Stapelkontext, der definiert, wie Elemente entlang der Z-Achse relativ zum Benutzer positioniert werden. Durch Festlegen eines Z-Index-Werts in CSS wird ein Stapelkontext für ein Element erstellt, in dem die Position seiner untergeordneten Elemente innerhalb dieses Kontexts berechnet wird. Modale Fenster stehen immer an der Spitze dieser Hierarchie, daher ist kein Z-Index erforderlich.

Erfahren Sie mehr über den Stacking-Kontext auf MDN.

Um mehr über die in der obersten Ebene gerenderten Elemente zu erfahren, besuchen Sie MDN.

Sperrung von Dokumenten

Wenn ein modales Element in der obersten Ebene gerendert wird, wird ein ::backdrop-Pseudoelement mit der gleichen Größe wie der sichtbare Dokumentbereich erstellt. Dieser Hintergrund verhindert die Interaktion mit dem Rest der Seite, auch wenn pointer-events: none CSS-Regel festgelegt ist.

Das Inert-Attribut wird automatisch für alle Elemente außer dem modalen Fenster festgelegt und blockiert Benutzeraktionen. Es deaktiviert Klick- und Fokusereignisse und macht die Elemente für Bildschirmlesegeräte und andere unterstützende Technologien unzugänglich.

Erfahren Sie mehr über das inerte Attribut auf MDN.

Fokusverhalten

Wenn das Modal geöffnet wird, erhält das erste fokussierbare Element darin automatisch den Fokus. Um das ursprünglich fokussierte Element zu ändern, können Sie die Attribute autofocus oder tabindex verwenden. Das Festlegen von tabindex für das Dialogelement selbst ist nicht möglich, da es das einzige Element auf der Seite ist, bei dem keine inerte Logik gilt.

Nachdem der Dialog geschlossen wurde, kehrt der Fokus zu dem Element zurück, das ihn geöffnet hat.

Lösen von UX-Problemen mit modalen Fenstern

Leider ist die native Implementierung des

Das Element deckt nicht alle Aspekte der Interaktion mit modalen Fenstern ab. Als Nächstes möchte ich auf die wichtigsten UX-Probleme eingehen, die bei der Verwendung modaler Fenster auftreten können, und auf deren Lösung.

Scroll-Blockierung

Auch wenn das native modale HTML5-Fenster ein ::backdrop-Pseudoelement erstellt, das die Interaktion mit dem darunter liegenden Inhalt blockiert, ist der Seitenscroll weiterhin aktiv. Dies kann für Benutzer ablenkend sein, daher wird empfohlen, den Inhalt des Textkörpers abzuschneiden, wenn das Modal geöffnet wird:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

Eine solche CSS-Regel muss jedes Mal dynamisch hinzugefügt und entfernt werden, wenn das modale Fenster geöffnet und geschlossen wird. Dies kann durch Bearbeiten einer Klasse erreicht werden, die diese CSS-Regel enthält:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Sie können auch den :has-Selektor verwenden, wenn sein Supportstatus den Anforderungen des Projekts entspricht.

<dialog open>Hi, I'm a popup!</dialog>

Probieren Sie es aus: https://codepen.io/alexgriss/pen/XWOyVKj

Schließen des Dialogs durch Klicken außerhalb des Fensters

Dies ist ein Standard-UX-Szenario für ein modales Fenster und kann auf verschiedene Arten implementiert werden. Hier sind zwei Möglichkeiten, dieses Problem zu lösen:

Eine Methode, die auf dem Verhalten des Pseudoelements ::backdrop basiert

Ein Klick auf das Pseudoelement ::backdrop gilt als Klick auf das Dialogelement selbst. Wenn Sie daher den gesamten Inhalt des modalen Fensters in ein zusätzliches

und dann das Dialogelement selbst abdecken, können Sie bestimmen, wohin der Klick gerichtet war – auf den Hintergrund oder auf den modalen Fensterinhalt.

Vergessen Sie nicht, die standardmäßigen Abstands- und Rahmenstile des Browsers für den

zurückzusetzen. Element, um zu verhindern, dass das modale Fenster bei versehentlichen Klicks geschlossen wird:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

Jetzt wenden wir die allgemeinen Stile für die Rahmen und Ränder des modalen Fensters nur auf den inneren Wrapper an.

Wir müssen eine Funktion schreiben, die das modale Fenster nur schließt, wenn auf den Hintergrund geklickt wird, nicht auf das innere Wrapper-Element:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Probieren Sie es aus: https://codepen.io/alexgriss/pen/mdvQXpJ

Eine Methode, die auf der Bestimmung der Größe des Dialogfensters basiert

Diese Methode unterscheidet sich von der ersten, die einen zusätzlichen Wrapper für den modalen Inhalt benötigte. Hier benötigen Sie keine zusätzliche Verpackung. Sie müssen lediglich überprüfen, ob die Position des Cursors beim Klicken den Bereich des Elements verlässt:

<dialog open>Hi, I'm a popup!</dialog>

Probieren Sie es aus: https://codepen.io/alexgriss/pen/NWoePVP

Gestalten des Dialogfensters

Der

Das Element ist hinsichtlich des Stils flexibler als viele native HTML-Elemente. Hier sind einige Beispiele für den Stil von Dialogfenstern:

Den Hintergrund mit dem ::backdrop-Selektor gestalten: https://codepen.io/alexgriss/pen/ExrOQEO

Animiertes Dialogfenster zum Öffnen und Schließen: https://codepen.io/alexgriss/pen/QWYJQJO

Modalfenster als Seitenleiste: https://codepen.io/alexgriss/pen/GRzwxgr

Zugänglichkeit

Lange Zeit war der

Element hatte einige Probleme mit der Barrierefreiheit, aber jetzt funktioniert es gut mit wichtigen Hilfstechnologien wie Bildschirmleseprogrammen (VoiceOver, TalkBack, NVDA).

Wenn ein

Beim Öffnen wird der Fokus vom Screenreader auf den Dialog verschoben. Bei modalen Fenstern bleibt der Fokus im Dialog, bis er geschlossen wird.

Standardmäßig ist der

Das Element wird von unterstützenden Technologien als mit dem ARIA-Attribut „role="dialog" versehen erkannt. Ein modaler Dialog wird als mit dem ARIA-Attribut aria-modal="true" versehen erkannt.

Hier finden Sie einige Möglichkeiten, die Barrierefreiheit des

zu verbessern. Element:

aria-labelledby

Fügen Sie immer einen Titel in Dialogfenster ein und geben Sie das aria-labelledby-Attribut für das

an. Element, wobei der Wert auf die ID des Titels gesetzt ist.

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

Wenn Sie das Pseudoelement ::backdrop formatieren müssen, stellen Sie sicher, dass Sie diese Stile auch auf das entsprechende .backdrop-Element anwenden, um die Kompatibilität mit älteren Browsern sicherzustellen:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Es wird empfohlen, das Polyfill über einen dynamischen Import zu verbinden und nur für Browser, die das

nicht unterstützen. Element:

<dialog open>Hi, I'm a popup!</dialog>

Abschluss

Das native HTML5

Element ist ein relativ einfaches, aber leistungsstarkes Tool zum Implementieren modaler Fenster und Popups. Es wird von modernen Browsern gut unterstützt und kann erfolgreich in Projekten verwendet werden, die sowohl auf Vanilla JS als auch jedem Frontend-Framework basieren.

In diesem Artikel haben wir die folgenden Themen besprochen:

• Probleme im
  Element löst;
• Interaktion mit dem
  Element-API;
• Wie Dialogfenster auf Browserebene funktionieren;
• Häufige Probleme mit Modalitäten und ihre Lösungen;
• Verbesserung der Zugänglichkeit des
  Element für unterstützende Technologien wie Bildschirmlesegeräte;
• Erweiterung der Browserunterstützung für
  Element.

Abschließend lade ich Sie ein, sich die Implementierung der modalen Fensterkomponente in reinem JS anzusehen, die die im Artikel besprochenen Hauptaspekte berücksichtigt: https://codepen.io/alexgriss/pen/abXPOPP

Das ist alles, was ich über die Arbeit mit dem

mitteilen wollte. HTML-Element. Ich hoffe, dieser Artikel inspiriert Sie zum Experimentieren!