HTML `<dialog>`-Element

Das <dialog>-Element ist eines der HTML5-Elemente. Es wird verwendet, um eine native Dialogbox zu erstellen, mit der der Benutzer interagiert und bestimmte Aktionen ausführt. Mit diesem Element können Sie beispielsweise Popup-Nachrichten oder Formulare erstellen. Die Dialogbox ist standardmäßig ausgeblendet. Sie wird sichtbar, wenn das open-Attribut gesetzt ist.

Um den Inhalt anzuzeigen oder auszublenden, benötigen wir die JavaScript-API.

Wenn <form>-Elemente mit dem Attribut method="dialog" angegeben werden, können sie in einem Dialog kombiniert werden. Wenn ein solches Formular vorhanden ist, schließt sich der Dialog beim Absenden des Formulars, und die Eigenschaft returnValue speichert den Wert der geklickten Schaltfläche.

Zum Styling hinter dem <dialog>-Element können Sie das CSS-Pseudo-Element ::backdrop verwenden.

Syntax

Das <dialog>-Element wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<dialog>) und dem schließenden (</dialog>) Tag geschrieben.

Beispiel für das HTML `<dialog>`-Element:

HTML <dialog>-Element

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      dialog {
        width: 40%;
      }
    </style>
  </head>
  <body>
    <div>
      <dialog id="DialogExample">
        <p>
          Here is some text for example.
        </p>
        <button id="hide">Close dialog text</button>
      </dialog>
      <button id="show">Show dialog text</button>
    </div>
    <script type="text/javascript">
      (function() { var dialog = document.getElementById('DialogExample'); document.getElementById('show').onclick = function() { dialog.showModal(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })();
    </script>
  </body>
</html>

Try it Yourself »

Ergebnis

Beispiel für Dialog

Attribute

Attribut	Wert	Beschreibung
open	open	Zeigt an, dass die Dialogbox aktiv ist und der Benutzer damit interagieren kann.

Das <dialog>-Element unterstützt auch die Globalen Attribute und die Ereignisattribute.

So stylen Sie ein HTML <dialog>-Element

Sie können das Erscheinungsbild des Dialogs und dessen Hintergrundüberlagerung mit CSS anpassen. Das Pseudo-Element ::backdrop zielt auf den Bereich hinter dem Dialog ab.

css

dialog {
  border: 1px solid #ccc;
  border-radius: 0.5em;
  padding: 1em;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

Hinweis zu JavaScript-Methoden: Das Beispiel verwendet dialog.showModal(), das den Dialog als Modal anzeigt (blockiert die Interaktion mit dem Rest der Seite). Um einen nicht-modalen Dialog anzuzeigen, der die Interaktion mit anderen Elementen ermöglicht, verwenden Sie stattdessen dialog.show().

Praxis

Welche Attribute unterstützt das HTML <dialog>-Element?

<open>: Dieses boolesche Attribut zeigt an, dass die Dialogbox zugänglich und/ oder interaktiv ist.<modal>: Dieses Attribut erfordert eine Benutzerinteraktion und verhindert dadurch die Interaktion mit dem Rest der Webseite, bis die Dialogbox geschlossen ist.Das <dialog>-Element unterstützt keine Attribute.<returnValue>: Im Gegensatz zu open und showModal() spiegelt dies kein Inhaltsattribut wider, und sein Zweck besteht darin, einen String zu speichern, der generiert und verwendet werden kann, wenn die Dialogbox geschlossen wird.

HTML <dialog>-Element ​

Syntax ​

Beispiel für das HTML <dialog>-Element: ​

Ergebnis ​