Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mit dem <dialog>-Element von HTML steht eine native Methode zur Verfügung um ein Dialogfenster bzw. einen Modal Screen zu erzeugen. Im Gegensatz zu selbstgebauten Lösungen wie einer Lightbox, ist die semantische Qualität der von <dialog> deutlich besser. In Kombination mit JavaScript kann das Fenster geöffnet oder geschlossen werden. In diesem Beitrag geben wir euch eine kurze Übersicht über die Eigenschaften des Elements.

Funktionsweise in HTML

Das <dialog>-Element könnt ihr im Prinzip verwenden wie ein <div>. Globale Attribute sind erlaubt. tabindex ist semantisch nicht korrekt und darf nicht verwendet werden.

<dialog>
    Inhalt des Dialogs
</dialog>

Zum Veröffentlichungszeitpunkt dieses Beitrags ist das Verhalten des <dialog>-Elements ist über die Browser hinweg noch sehr inkonsistent, da es auch noch als experimentelle Technologie gekennzeichnet ist. In Chrome wird <dialog> schon seit Version 37 unterstützt. Daher empfehlen wir euch unser Beispiel am besten in Chrome anzuschauen.

Standardmäßig ist das <dialog>-Element ausgeblendet. Wenn ihr das Element über die Entwickler-Konsole untersucht, werdet ihr folgende, vom Browser geschriebene, Angabe finden:

/* wenn das Dialog-Element, nicht das Attribut open besitzt, ausblenden */ 

dialog:not([open]) {
  display: none;
}

Dem <dialog>-Tag muss im HTML also zusätzlich das Attribut open gegeben werden, damit der Dialog sichtbar wird.

Dialog-Elemente mit JavaScript ein-/ausblenden

Im Normalfall wird das <dialog>-Element ausgeblendet sein und erst durch eine Interaktion des Benutzers (den Klick auf einen Button o. ä.) eingeblendet werden. Für diese Interaktion benötigt ihr JavaScript und die show() oder showModal() Funktion.

Das Dialog-Element einblenden: show() und showModal()

Die Methode show() blendet das Element entsprechend seiner Position im DOM ein. Möchtet ihr es an einer anderen Stelle anzeigen, müsst ihr es mit CSS positionieren.

document.getElementById("show-dialog").addEventListener("click", () => {
    document.getElementById("dialog").show();
});

Die showModal()-Methode hingegen interpretiert das Element als Modal Screen und zeigt es entsprechend an.

document.getElementById("show-modal-dialog").addEventListener("click", () => {
    document.getElementById("dialog").showModal();
});

Es wird standardmäßig in der Mitte der Seite positioniert und befindet sich in der obersten Ebene. Außerdem wird automatisch das CSS Pseudo-Element ::backdrop verwendet, um den Hintergrund abzudunkeln und einen Klick auf darunter liegende Elemente zu verhindern. Das CSS-Pseudoelement kann übrigens mit einem CSS-backdrop-filter gestaltet werden.

Unser folgendes Beispiel zeigt einen Dialog, der entweder die show()-Methode oder über die showModal()-Methode geöffnet werden kann. Es handelt sich beide Male um das selbe <dialog>-Element, welches wir in der Sidebar untergebracht haben. Es ist kein CSS, abseits des browsereigenen Stylesheets, im Einsatz, der das Aussehen oder die Position des Dialogs beeinflusst. Beide Funktionen fügen dem <dialog> das Attribute open hinzu.

HTML5 Dialog Element
Dialog geöffnet mit der show()-Methode
HTML5 Dialog Element
Dialog geöffnet mit der showModal()-Methode

Das Dialog-Element schließen mit close()

Geschlossen werden kann ein Dialog-Element mit der close()-Funktion.

document.getElementById("close-dialog").addEventListener("click", () => {
    document.getElementById("dialog").close();
});

Wenn zum öffnen des Dialogs die showModal()-Methode verwendet wurde, kann ein Dialog zusätzlich sogar nativ mit der ESC-Taste geschlossen werden. Das könnt ihr ebenfalls in unserem Beispiel ausprobieren.

Beispiel anschauen

Browser-Support

Der <dialog>-Tag ist zum Veröffentlichungszeitpunkt dieses Beitrags noch als experimentelle Technologie gekennzeichnet, da diese Technologie noch nicht abschließend implementiert wurde. Einige Browsern, wie der IE oder Edge unterstützen <dialog> nicht. Es ist auch möglich, dass sich die Syntax in einer späteren Spezifikation noch ändert.

Den detaillierten Browsersupport entnehmt ihr bitte caniuse.com

Geschrieben von Felix Lehmann

thumb

Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.

Feedback & Ergänzungen – 4 Kommentare

  1. Latz
    schrieb am 20.05.2021 um 10:16 Uhr:
  2. dennis
    schrieb am 08.05.2019 um 08:56 Uhr:

    Sorry, aber kann man nicht gebrauchen. Der Browser-Support ist gleich null!

    Antworten
    • Jonas Hellwig
      schrieb am 08.05.2019 um 15:52 Uhr:

      Also einerseits wird der Support besser und andererseits werden Webtechnologien häufig auch für Nicht-Website-Projekte eingesetzt. Dort ist dann zB. in einer geschlossenen Umgebung Chrome im Einsatz und alles läuft.

      Antworten
    • Mario
      schrieb am 04.07.2019 um 09:52 Uhr:

      Also knapp 72 % laut caniuse ist jetzt nicht gleich null! Aber für öffentliche Webprojekte ist es ohne Fallback leider wirklich noch nicht nutzbar.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: