试试原生dialog标签，我的模态框终于不用再套Bootstrap了

做过后台项目的都知道，模态框是个绕不开的交互。以前我习惯直接引一个 Bootstrap，然后套它那个 modal 类，但项目里为了一个弹窗去引入整个 jQuery 或再维护一堆 JS，总觉得不划算。后来我去翻 MDN 发现，HTML 居然早就出了一个 <dialog> 标签，自带模态层和焦点管理，这东西简直让我眼前一亮。用完之后我果断把项目里的弹窗组件全部换成了原生 dialog，代码量肉眼可见地变少了。

原生 dialog 到底怎么用

它的基础就是一个标签，你只需要写一个按钮和一个 dialog 元素，然后调用它的 showModal() 方法就能弹出来。不用手动去控制 display，不用给背景加遮罩，甚至不用管焦点拉回。

<button id="openModal">打开模态框</button>

<dialog id="demoModal">
    <p>这是一个原生模态框</p>
    <button id="closeModal">关闭</button>
</dialog>

<script>
    const openBtn = document.getElementById('openModal');
    const modal = document.getElementById('demoModal');
    const closeBtn = document.getElementById('closeModal');

    openBtn.addEventListener('click', () => modal.showModal());
    closeBtn.addEventListener('click', () => modal.close());
</script>

这就完成了。按钮点击打开，弹窗里的关闭按钮点击关闭。如果你希望用户点击弹窗外的区域关闭，需要通过 JavaScript 监听 dialog 的点击事件并判断点击位置来实现，不过官方推荐的是用 form 配合 method="dialog"，这样取消按钮会自动关闭，不需要额外脚本。

好消息：form 可以自动关闭 dialog

在实际业务里，模态框里通常有个表单，点了“取消”要关闭，点了“提交”要验证并关闭。利用 method="dialog"，你可以让提交按钮直接关闭对话框，并且把表单数据带过去，完全不用写一行 JS 的关闭逻辑。

<dialog id="loginModal">
    <form method="dialog">
        <label>用户名</label>
        <input type="text" name="username">
        <label>密码</label>
        <input type="password" name="password">
        <button value="cancel">取消</button>
        <button value="submit">登录</button>
    </form>
</dialog>

当点击“取消”或“登录”按钮时，表单会以关闭对话框结束，并且 dialog 会有一个 returnValue 属性，存放那个按钮的 value。比如点击取消，returnValue 就是 “cancel”。这样你不用监听按钮 click 再手动 close，逻辑清爽很多。

接收表单数据的技巧

如果你在使用 method="dialog" 时又想拿到表单字段值，可以通过监听 dialog 的 close 事件，然后在回调里访问表单元素，或者用 FormData 提取：

modal.addEventListener('close', () => {
    const form = modal.querySelector('form');
    const formData = new FormData(form);
    const username = formData.get('username');
    console.log('用户名：', username);
    console.log('按钮返回值：', modal.returnValue);
});

这样在关闭时，你已经可以拿到填好的数据，方便做下一步提交或验证。

开一个重要选项：showModal() 与 show() 的区别

• showModal(): 以真正的模态框形式展示。它会弹出一个顶层内建层，背景不可点击，并且会锁定焦点（Tab 循环在对话框内部）。这种适合强制用户必须处理的操作。
• show()：以一种非模态的方式显示。它不是顶层内建层，背后的元素依然可以获得焦点和点击。类似于一个非遮罩的浮层，适合做简短的提示，不强制打断用户。

从浏览器角度来说，showModal() 出来的对话框自带遮罩背景；而 show() 则没有。如果你需要自定义背景样式，可以用 CSS 的 ::backdrop 伪元素，但这不是今天主要讲的。

内置焦点管理，你骗了谁

以前用 div 模拟模态框，最难搞的是焦点管理：打开弹窗后用户按 Tab 可能会跑到背后的网页控件上，关闭后焦点又不知道丢哪里。原生 dialog 自动处理了这一切：当调用 showModal()，焦点会自动移到对话框里的第一个可聚焦元素（比如第一个按钮或输入框）。关闭后，焦点会回到之前触发打开的那个按钮上。这种健壮的可用性，靠手搓得花不少时间。

用 backdrop 做一个简单的遮罩，但 CSS 不是本篇重点

虽然我不打算贴样式代码，但我要告诉大家：如果你想自定义背景遮罩，只需要在 CSS 里给 dialog::backdrop 写样式即可。比如设置背景色半透明、模糊度等。因为是原生的，你不用再额外的 div。如果不想写样式，系统默认也有一个浅色半透明背景。

结合 popover 和 dialog 怎么选

上一回我写了一篇文章讲 popover 属性，那个属性适合做轻量气泡、气泡菜单、提示层，点击外面自动关闭。而 dialog 更适合真正需要用户决策的对话框。你的弹窗里如果有表单、有按钮组、需要阻塞主线操作，那用 dialog；如果你只是悬浮一段说明文字，用 popover 更舒服。两者各有分工。

一个坑：关闭事件和 Esc 键

当用户按 Esc 键时，dialog 也会触发 cancel 事件，接着触发 close。如果你不想让用户用 Esc 关闭，需要手动拦截 cancel 事件并调用 preventDefault()：

modal.addEventListener('cancel', (e) => {
    e.preventDefault(); // 阻止Esc关闭
});

不过一般来说，允许 Esc 关闭更符合用户习惯，除非你的表单不允许中途放弃，我才推荐拦截。

完整案例：一个新建项目对话框

我把这些知识整合成一个实际应用场景。假设要在后台创建一个新项目，用一个对话框收集“项目名称”和“项目描述”，并且点击取消关闭，点击创建时收集数据并模拟提交。

<button id="createBtn">新建项目</button>

<dialog id="createDialog">
    <h2>填写项目信息</h2>
    <form id="projectForm">
        <label>项目名称</label>
        <input type="text" name="name" required>
        <label>项目描述</label>
        <textarea name="description" rows="3"></textarea>
        <div>
            <button type="button" id="cancelBtn" value="cancel">取消</button>
            <button type="submit" value="confirm">创建</button>
        </div>
    </form>
</dialog>

<script>
    const createBtn = document.getElementById('createBtn');
    const dialog = document.getElementById('createDialog');
    const form = document.getElementById('projectForm');
    const cancelBtn = document.getElementById('cancelBtn');

    createBtn.addEventListener('click', () => dialog.showModal());

    // 点击取消关闭
    cancelBtn.addEventListener('click', (event) => {
        event.preventDefault();
        dialog.close();
    });

    // 表单提交时（点“创建”按钮），手动关闭并获取数据
    form.addEventListener('submit', (event) => {
        event.preventDefault();
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());
        console.log('项目名称:', data.name);
        console.log('项目描述:', data.description);

        // 关闭对话框
        dialog.close();
    });
</script>

我这里用 type=”button” 来模拟取消，用 form 的 submit 事件来组织数据，这样不会受 dialog 的 method="dialog" 影响。你完全可以根据自己需求混合使用。

关于浏览器的支持情况

dialog 元素在 Chrome、Firefox、Edge 以及 Safari 的 15.4 版本以后都支持了。现代浏览器基本可以使用。如果你的用户还在用非常老的浏览器，建议加一个简单的 polyfill。不过我相信都 2025 年了，这已经不是大问题。

总结

原生 dialog 标签让我少写了很多弹窗的状态管理代码：不需要布尔变量控制显示隐藏，不需要手动处理焦点，不需要自己写遮罩层。再加上 form 的紧密配合，现在很多弹窗表单我几乎不碰 JavaScript 就能完成交互。也许是我的项目还不够复杂，但至少从可维护性上看，原生 dialog 已经超越了我以往用过的任何自封装弹窗。

如果你厌倦了在 Bootstrap 模态框里反复 copy class，改天可以试试这个家伙。