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 March 2022.

Die open-Eigenschaft des HTMLDialogElement-Interfaces ist ein boolescher Wert, der das open-HTML-Attribut widerspiegelt und anzeigt, ob das <dialog> zur Interaktion verfügbar ist.

Wert

Ein boolescher Wert, der den Zustand des open-HTML-Attributs darstellt. Ein Wert von true bedeutet, dass der Dialog angezeigt wird, während false bedeutet, dass er nicht angezeigt wird.

Warnung: Auch wenn die open-Eigenschaft technisch gesehen nicht schreibgeschützt ist und direkt gesetzt werden kann, wird dies von der HTML-Spezifikation dringend abgeraten, da dies die normalen Dialog-Interaktionen auf unerwartete Weise stören kann. Beispielsweise wird das close-Ereignis nicht ausgelöst, wenn open programmgesteuert auf false gesetzt wird, und nachfolgende Aufrufe der Methoden close() und requestClose() haben keine Wirkung. Stattdessen ist es besser, Methoden wie show(), showModal(), close() und requestClose() zu verwenden, um den Wert des open-Attributs zu ändern.

Beispiele

Das folgende Beispiel zeigt einen einfachen Button, der beim Klicken ein <dialog> mit einem Formular über die showModal()-Methode öffnet. Von dort aus können Sie den Abbrechen-Button klicken, um den Dialog zu schließen (über die HTMLDialogElement.close()-Methode), oder das Formular über den Absenden-Button einreichen.

html
<!-- Simple pop-up dialog box -->
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
</dialog>

<p>
  <button id="openDialog">Open Dialog</button>
</p>
<p id="dialogStatus"></p>
js
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 dialog
openDialog.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>.