Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
HTMLDialogElement: open Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2022.
Dieopen-Eigenschaft desHTMLDialogElement-Interfaces ist ein boolescher Wert, der dasopen-HTML-Attribut widerspiegelt und anzeigt, ob das<dialog> zur Interaktion verfügbar ist.
Wert
Ein boolescher Wert, der den Zustand desopen-HTML-Attributs darstellt. Ein Wert vontrue bedeutet, dass der Dialog angezeigt wird, währendfalse bedeutet, dass er nicht angezeigt wird.
Warnung:Auch wenn dieopen-Eigenschaft technisch gesehen nicht schreibgeschützt ist und direkt gesetzt werden kann, wird dies von derHTML-Spezifikation dringend abgeraten, da dies die normalen Dialog-Interaktionen auf unerwartete Weise stören kann. Beispielsweise wird dasclose-Ereignis nicht ausgelöst, wennopen programmgesteuert auffalse gesetzt wird, und nachfolgende Aufrufe der Methodenclose() undrequestClose() haben keine Wirkung. Stattdessen ist es besser, Methoden wieshow(),showModal(),close() undrequestClose() zu verwenden, um den Wert desopen-Attributs zu ändern.
Beispiele
Das folgende Beispiel zeigt einen einfachen Button, der beim Klicken ein<dialog> mit einem Formular über dieshowModal()-Methode öffnet.Von dort aus können Sie denAbbrechen-Button klicken, um den Dialog zu schließen (über dieHTMLDialogElement.close()-Methode), oder das Formular über den Absenden-Button einreichen.
<!-- Simple pop-up dialog box --><dialog> <form method="dialog"> <button type="submit">Close</button> </form></dialog><p> <button>Open Dialog</button></p><p></p>const openDialog = document.getElementById("openDialog");const dialog = document.getElementById("dialog");const text = document.getElementById("dialogStatus");function openCheck(dialog) { if (dialog.open) { text.innerText = "Dialog open"; } else { text.innerText = "Dialog closed"; }}// Update button opens a modal dialogopenDialog.addEventListener("click", () => { dialog.showModal(); openCheck(dialog);});dialog.addEventListener("close", () => { openCheck(dialog);});Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-dialog-open |
Browser-Kompatibilität
Siehe auch
- Das HTML-Element, das dieses Interface implementiert:
<dialog>.