Das HTML-Dialog Element – Freude mit neuen Webstandards

Wegen dem UI-Element „Modal“ haben schon so einige FE-Entwickler viele Stunden an versenkt. Das Ganze so auf der Seite zu platzieren, dass es vom Styling her angenehm ist, war beispielsweise früher keine leichte Aufgabe!

Viele Kleinigkeiten sind zusätzlich zu beachten. Die Hintergrundfarbe, die Positionierung auf dem Bildschirm, Der Autofocus für Tastatur-Eingaben, die Positionierung der Box, und so weiter. Dieser Schmerz wird durch das neue HTML Dialog Element genommen!

Das HTML Dialog Element in Kürze

Die Spezifikation besagt:

The dialog element represents a transitory part of an application, in the form of a small window („dialog box“), which the user interacts with to perform a task or gather information. Once the user is done, the dialog can be automatically closed by the application, or manually closed by the user.

Especially for modal dialogs, which are a familiar pattern across all types of applications, authors should work to ensure that dialogs in their web applications behave in a way that is familiar to users of non-web applications.

https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element

Ein Dialog – Element ist also ein kleines Fenster, mit welchem Aktionen gesteuert oder Informationen gesammelt werden können. Das Fenster soll eventuell wieder schließbar sein.

Schauen wir uns mal den Basiscode für so ein Dialog-Element an:

  <dialog id="myDialog">
    <form method="dialog">
      <p>Greetings!</p>
      <input name="test1" type="string" />
      <input name="test2" type="number" />
      <button id="dialogBtn">OK</button>
    </form>
  </dialog>

Getriggert wird dieser Dialog letztendlich über die Methoden .show() oder .showModal(). Dabei ist die showModal Funktion dafür da, um Sachverhalte wie autofocus und Priorisierung zu steuern:

dialog.showModal()
Displays the dialog element and makes it the top-most modal dialog.This method honors the autofocus attribute.

https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element

Das Ganze sieht im Code folgendermaßen aus:

<div id="app">
  <h1>hello world</h1>
  <button id="action">trigger dialog</button>
  <dialog id="myDialog">
    <form method="dialog">
      <p>Greetings!</p>
      <input name="test1" type="string" />
      <input name="test2" type="number" />
      <button id="dialogBtn">OK</button>
    </form>
  </dialog>
</div>

const dialogDom = document.querySelector('#myDialog');
document.querySelector('#action').onclick = () => dialogDom.showModal();

Wie oben im Code zu sehen, gibt es eine weitere Besonderheit – das form-Tag mit der method „dialog“

<form method="dialog"></form>

Diese Methode verändert das normale Verhalten des Formulars und passt es für das Modal an. Das Standardverhalten ist das Schließen des Dialogs.

Auf Events des Modals reagieren

Mit einer Referenz auf das DOM kann auch auf das Close-Event reagiert werden, die das Dialog Element anbietet. Will man zum Beispiel den Input des Formulars aus dem Dialog holen, würde das in dem Fall so funktionieren:

dialogDom.addEventListener('close', (e) => {
  e.preventDefault();
  let formData = {};
  dialogDom.querySelectorAll('input').forEach((inp) => {
    formData[inp.name] = inp.value;
  });
  dialogDom.close();
});

Make it yours! – Styling für Dialoge

Da der Webstandard für den Dialog schon einiges an Grundgestaltung von Haus aus mit in die Browser führt, kann man das Element beinahe „out of the box“ gestyled nutzen.

Es gibt allerdings sehr gemütliche Wege das Ganze zu individualisieren. Das Dialog Element kann beispielsweise einfach als CSS-Selektor bedient werden, um es anzupassen, z.B:

dialog {
  border: none !important;
  border-radius: calc(5px * var(--ratio));
  box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  padding: 1.6rem;
  max-width: 400px;
}

Der Pseudo-Selektor backdrop macht es hierbei zusätzlich sehr leicht, auch den Hintergrund eines Modals auf seine Bedürfnisse anzupassen. Im oberen Beispiel habe ich einen leicht linear orangen Hintergrund auf meinen Backdrop gelegt. Das Ganze hat so funktioniert:

dialog::backdrop {
  background-color: darkorange;
  background-image: linear-gradient(130deg, #ff7a18, #af002d 66.07%);
}

HTML-Standards – Back to the basics!

Abschließend gesagt, ich finde dass hier ein sehr guter Web-Standard für das Dialog-Element entstanden ist. Und damit ein weiterer Usecase bedient werden kann, für den keine Sonderlocken wie Libraries, Frameworks oder Ähnliches benötigt werden. Schlussendlich sind die Möglichkeiten, was mit VanillaJS gemacht werden kann, inzwischen so vielfältig, dass es oft gar nicht notwendig ist, für kleine Applikationen überhaupt zusätzliche Abhängigkeiten in ein Projekt zu holen!

Quellen:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
• https://html.spec.whatwg.org/multipage/interactive-elements.html#dom-dialog-returnvalue-dev