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>。