HTML <dialog> 标签用于表示对话框、警报框或子窗口。
它有一个名为 open 的属性，该属性指示对话框处于活动状态并且可以与之交互。
如果未设置 open 属性，则对话框将不会显示在屏幕视图上，并且用户无法看到它。
您可以使用对话框元素在单击任何表单按钮时向用户提供一些警报消息。
语法
<dialog>.....</dialog>
属性
<dialog> 标签支持 HTML 的 全局属性 和 事件属性。也接受下面列出的特定属性。
| 属性 | 值 | 描述 |
|---|---|---|
| open | open | 定义对话框处于活动状态，可以与之交互。 |
<dialog> 标签示例
下面的示例将说明<dialog> 标签的用法。在何处、何时以及如何使用<dialog> 标签创建对话框、警报框或子窗口。
<dialog> 标签创建对话框
以下程序演示了 <dialog> 标签的用法。我们没有在 <dialog> 标签中使用“open”属性。因此，在程序执行后，不会显示任何对话框，因为默认情况下，它是关闭的。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dialog box</title>
</head>
<body>
<!--create a dialog element-->
<p>Example of the HTML 'dialog' element</p>
<dialog>Alert</dialog>
</body>
</html>
默认打开<dialog> 标签
以下是 HTML <dialog> 框的另一个示例。在这里，我们将使用 <dialog> 标签创建一个对话框。我们在 'dialog' 元素中使用 'open' 属性，因此当我们执行程序时，屏幕视图上将显示一个对话框。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dialog box</title>
</head>
<body>
<p>Example of the HTML 'dialog' element</p>
<!--create a dialog element-->
<dialog open>Dialog box!</dialog>
</body>
</html>
<dialog> 标签的样式
在以下示例中，我们将使用 HTML <dialog> 标记创建一个对话框。我们使用 CSS 来设置创建的对话框的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dialog box</title>
<style>
dialog {
width: 100px;
height: 50px;
background-color: red;
color: white;
display: grid;
place-items: center;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Example of the HTML 'dialog' element</p>
<!--create a dialog element-->
<dialog open>Alert box!</dialog>
</body>
</html>
在<dialog> 标签中创建表单
在此示例中，我们使用 HTML <dialog> 标签创建一个对话框，并在对话框元素中创建一个包含名为“OK”的按钮的“form”，当用户单击“OK”按钮时，对话框将消失。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dialog box</title>
<style>
dialog {
background-color: red;
color: white;
}
</style>
</head>
<body>
<p>Example of the HTML 'dialog' element</p>
<!--create a dialog element-->
<dialog open>
<p>Warning!</p>
<form method="dialog">
<button>Ok</button>
</form>
</dialog>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | 37.0 | 79.0 | 98.0 | 15.4 | 24.0 |
