HTML DOM Dialog 对象

<dialog> 对象用于定义一个对话框，可以在其中显示一些内容，如提示消息、警告信息或者用户输入表单等。在 HTML5 中引入了 <dialog> 对象，使得开发者可以更加灵活地创建交互式的对话框。

使用方法

要创建一个 <dialog> 对象，首先需要在 HTML 中定义一个 <dialog> 元素，并设置一个唯一的 id 属性，如下所示：

<dialog id="myDialog">
    <p>This is a dialog box.</p>
</dialog>

然后，通过 JavaScript 可以通过 getElementById 方法来获取这个 <dialog> 对象，进而对其进行操作，例如显示、隐藏、关闭等。

const dialog = document.getElementById('myDialog');

// 显示对话框
dialog.showModal();

// 关闭对话框
dialog.close();

方法和属性

方法

• showModal(): 显示对话框，并阻止用户与页面的其他部分进行交互，直到对话框被关闭。
• close(): 关闭对话框。

属性

• open: 表示对话框是否处于打开状态。

事件

<dialog> 对象还支持一些事件，例如 open 和 close 事件，可以在对话框打开或关闭时执行相应的操作。

-- -------------------- ---- -------
----- ------ - ------------------------------------

------------------------------- -- -- -
    ------------------- ---------
---

-------------------------------- -- -- -
    ------------------- ---------
---

示例代码

<dialog id="myDialog">
    <p>This is a dialog box.</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Show Dialog</button>

通过以上示例代码，你可以创建一个简单的对话框，并在页面上显示和关闭它。

这就是关于 <dialog> 对象的介绍，希望对你有所帮助。