HTMLDialogElement: open 屬性
HTMLDialogElement 介面的 open 屬性是一個布林值，反映了 open HTML 屬性，指示 <dialog> 元素是否可互動。
值
一個布林值，表示 open HTML 屬性的狀態。值為 true 表示對話方塊正在顯示，值為 false 表示對話方塊未顯示。
警告：雖然 open 屬性在技術上不是隻讀的，可以被直接設定，但 HTML 規範強烈建議不要這樣做，因為它可能以意想不到的方式破壞正常的對話方塊互動。例如，當透過程式設計方式將 open 設定為 false 時，close 事件不會觸發，並且後續呼叫 close() 和 requestClose() 方法將無效。因此，最好使用 show()、showModal()、close() 和 requestClose() 等方法來更改 open 屬性的值。
示例
以下示例展示了一個簡單的按鈕，點選該按鈕後，將透過 showModal() 方法開啟一個包含表單的 <dialog>。從那裡，您可以點選“取消”按鈕（透過 HTMLDialogElement.close() 方法）來關閉對話方塊，或者透過提交按鈕提交表單。
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);
});
結果
規範
| 規範 |
|---|
| HTML # dom-dialog-open |
瀏覽器相容性
載入中…
另見
- 實現此介面的 HTML 元素：
<dialog>。