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.
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.
<!-- 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>
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
Loading…
Siehe auch
- Das HTML-Element, das dieses Interface implementiert:
<dialog>.