HTML dialog 标签

HTML dialog 语法

在 HTML 中，dialog 标签用于实现自定义的对话框。它提供了一种简单而标准化的方法来创建弹出式对话框，而不需要使用 JavaScript 或其他复杂技术。

其中，dialog 标签可以用来实现：

提示框（比如 “是否确认删除？”）。
表单弹窗（比如 “登录”、“注册”）。
任何需要在页面上弹出交互的窗口。

语法：

<dialog></dialog>

说明：

dialog 标签支持以下属性。

open（可选）：表示对话框是否可见。默认情况下，对话框是隐藏的。

HTML dialog 摘要

属于	HTML 标签
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML dialog 示例

接下来，我们通过几个简单的例子来讲解一下 HTML dialog 标签是如何使用的。

示例 1：dialog 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <dialog open>
        <p>这是一个对话框</p>
        <button>确定</button>
        <button>取消</button>
    </dialog>
</body>
</html>

页面效果如下图所示。

HTML dialog标签示例

分析：

上面例子使用 dialog 标签实现了一个最基本的对话框。需要注意的是，dialog 标签的内容默认是不显示的，你需要给它加上 open 属性才会显示出来。

示例 2：dialog 标签实现模态对话框

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        window.onload = function() {
            const btnShow = document.getElementById("show");
            const btnHidden = document.getElementById("hidden");
            const oDialog = document.getElementById("dialog");

            // 显示对话框
            btnShow.onclick = function() {
                oDialog.showModal();
            }
            // 关闭对话框
            btnHidden.onclick = function() {
                oDialog.close();
            }
        }
    </script>
</head>
<body>
    <button id="show">登录</button>
    <dialog id="dialog">
        <p>欢迎来到绿叶网</p>
        <button id="hidden">关闭</button>
    </dialog>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当单击【登录】按钮之后，页面效果如下图所示。

HTML dialog标签应用效果-1

HTML dialog标签应用效果-2

分析：

所谓的模态对话框，指的是类似于浏览器自带的对话框效果。这种对话框打开之后，会阻止用户与页面上其他内容交互，直到对话框关闭。想要实现模态对话框，如果不借助 dialog 标签，实现起来是非常麻烦的，因为它要判断非常多的逻辑。

对于 dialog 来说，我们可以使用 showModal() 方法来显示模态对话框，然后可以使用 close() 方法来关闭模态对话框。

示例 3：dialog 元素的事件

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        window.onload = function() {
            const btnShow = document.getElementById("show");
            const btnHidden = document.getElementById("hidden");
            const oDialog = document.getElementById("dialog");

            // 显示对话框
            btnShow.onclick = function() {
                oDialog.showModal();
            }
            // 关闭对话框
            btnHidden.onclick = function() {
                oDialog.close();
            }

            oDialog.addEventListener("close", () => {
                console.log("对话框已关闭");
            });
        }
    </script>
</head>
<body>
    <button id="show">登录</button>
    <dialog id="dialog">
        <p>欢迎来到绿叶网</p>
        <button id="hidden">关闭</button>
    </dialog>
</body>
</html>

页面效果如下图所示。

HTML dialog标签的事件

分析：

oDialog.addEventListener("close", () => {
    console.log("对话框已关闭");
});

上面代码使用 addEventListener() 方法来监听 dialog 元素的 close 事件，当关闭对话框时就会触发该事件并且打印 "对话框已关闭"。