Skip to content
JavaScript Reference

HTML <dialog>-element

Das HTML <dialog>-Element stellt uns den Großteil der Funktionen, die wir beim custom modal selbst programmieren mussten, zur Verfügung. Schauen wir uns die Sache an.

Dialogfenster

Section titled “Dialogfenster”

Zunächst brauchen wir das HTML für die Dialog- bzw. Modal-Box. Die Position auf der Seite spielt keine Rolle. Falls mehrere Dialoge auf der Seite verwendet werden, muss jeder eine id bekommen, damit man sie unabhängig voneinander ansteuern kann.

<dialog id="myDialog" class="modal">
  <h2>Dialogfenster</h2>
  <p>Ich bin ein einfaches Dialogfenster. Eine Interaktion mit dem übrigen Seiteninhalt ist weiterhin problemlos möglich.</p>
  <button class="button close-dialog">Dialogfenster schließen</button>
</dialog>

Nun noch einen Button, um das Dialogfenster auf Klick zu öffnen:

<button class="button open-dialog">Dialogfenster öffnen</button>

Das Öffnen und Schließen geschieht mit JavaScript. Das Dialog-Element verfügt über die Methoden show() und close():

const dialog = document.querySelector('#myDialog');
const openDialog = document.querySelector('.open-dialog');
const closeDialog = document.querySelector('.close-dialog');


openDialog.addEventListener('click', e => {
  dialog.show();
});


closeDialog.addEventListener('click', e => {
  dialog.close();
});

Die Methode show() fügt dem <dialog>-Element das Attribut open hinzu und die Box wird sichtbar.

Attribut open

Die Dialogbox kommt mit einem User-Agent-Stylesheet (Beachte: user-agent-important-styles können nicht überschrieben werden! Sollen sie auch nicht!). Der Hintergrund wird nicht gedimmt, um zu verdeutlichen, dass die Seite weiterhin erreichbar ist.

/* dialog box closed */
dialog:not([open]) {
    display: none;
}
dialog {
  position: absolute;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  width: fit-content;
  height: fit-content;
  background-color: canvas;
  color: canvastext;
  overlay: none !important;
  margin: auto;
}


/* dialog box open */
dialog[open] {
    display: block;
}

Schließen des Fensters

Section titled “Schließen des Fensters”

Dialogfenster können auf verschiedene Arten geschlossen werden:

  • light dismiss user action: irgendwohin außerhalb des Dialogfensters klicken
  • platform-specific: mit der Esc-Taste bzw. einer “zurück” oder “dismiss” Geste auf Mobilgeräten
  • developer-specified: mit einem Mechanismus, den der Entwickler einbaut. Das kann ein Button mit einem Click-Handler sein, der die Methode close() aufruft oder mit dem Absenden eines Formulars

Das <dialog>-Element verfügt über das Attribut closedby. Dieses kann folgende Werte annehmen:

  • any: Das Dialogfenster kann mit jeder der oben genannten Methoden geschlossen werden
  • closerequest: platform-specific oder developer-specified
  • none: nur developer-specified

Wenn kein closedby-Attribut angegeben ist, gilt:

  • wenn über showModal() geöffnet, dann wie bei closerequest
  • sonst wie bei none

Verwendung

Section titled “Verwendung”

Ein Dialogfenster kann z.B. für eine Chatbox verwendet werden.

Section titled “Modal”

Weitere Quellen

Section titled “Weitere Quellen”