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 das Dialogfeld angezeigt wird, während false bedeutet, dass es nicht angezeigt wird.

Warnung: Obwohl die open-Eigenschaft technisch gesehen nicht schreibgeschützt ist und direkt gesetzt werden kann, wird dringend davon abgeraten, dies zu tun, wie es die HTML-Spezifikation beschreibt, da es die normalen Dialoginteraktionen auf unerwartete Weise stören kann. Zum Beispiel 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 eine einfache Schaltfläche, die beim Klicken ein <dialog> mit einem Formular über die showModal()-Methode öffnet. Von dort können Sie auf die Cancel-Schaltfläche klicken, um das Dialogfeld zu schließen (über die HTMLDialogElement.close()-Methode), oder das Formular über die Absenden-Schaltfläche 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>

<script>
  (() => {
    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);
    });
  })();
</script>

Ergebnis

Spezifikationen

Specification
HTML
# dom-dialog-open

Browser-Kompatibilität

Siehe auch

  • Das HTML-Element, das dieses Interface implementiert: <dialog>.