HTML - <dialog> 标签

HTML <dialog> 标签用于表示对话框、警报框或子窗口。

它有一个名为 open 的属性，指示对话框处于活动状态并且可以与之交互。如果未设置 open 属性，则对话框将不会显示在屏幕视图上，用户也无法看到它。您可以使用 dialog 元素在用户点击任何表单按钮时向其发出一些警报消息。

语法

   <dialog>.....</dialog>

属性

HTML 数据标签支持 HTML 的全局和事件属性。也接受特定的属性，如下所示。

属性	值	描述
open	open	指示对话框处于活动状态并且可以与之交互。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

HTML dialog 标签示例

以下示例将说明 dialog 标签的使用。在哪里、何时以及如何使用 dialog 标签创建对话框、警报框或子窗口。

创建对话框

以下程序说明了 HTML <dialog> 标签的使用。我们没有在 <dialog> 标签内使用 'open' 属性。因此，在程序执行后，不会显示任何对话框，因为默认情况下它是关闭的。

Open Compiler

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

默认打开的对话框

以下是 HTML <dialog> 框的另一个示例。在这里，我们使用 <dialog> 标签创建一个对话框。我们在 'dialog' 元素内部使用 'open' 属性，因此当我们执行程序时，屏幕视图上会显示一个对话框。

Open Compiler

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

设置对话框样式

在以下示例中，我们使用 HTML <dialog> 标签创建一个对话框，并使用 CSS 设置创建的对话框的样式。

Open Compiler

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

在对话框中创建表单

在此示例中，我们使用 HTML <dialog> 标签创建一个对话框，并在 dialog 元素中创建一个名为“确定”的按钮的“表单”，当用户单击“确定”按钮时，对话框将消失。

Open Compiler

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

支持的浏览器

标签
dialog	是 37.0	是 79.0	是 98.0	是 15.4	是 24.0

html_tags_reference.htm

打印页面