Bootstrap 6 Dialog 对话框用法：取代 Modal 的原生方案
Bootstrap 6 把弹层拆成了独立的 Dialog 组件，底层是浏览器原生 dialog 元素。本文给出最小示例、常用 data 属性、JS 配置，以及和 5.3 Modal 的对照。
一句话结论
Bootstrap 6 的弹层叫 Dialog，底层是原生 <dialog> 元素，用 showModal() 打开，遮罩、焦点捕获、Esc 关闭都交给浏览器。标记写法与 5.3 的 Modal 完全不同，不能直接套用旧代码。
最小示例
<button type="button" class="btn-solid theme-primary"
data-bs-toggle="dialog" data-bs-target="#myDialog">
打开对话框
</button>
<dialog class="dialog" id="myDialog">
<div class="dialog-header">
<h1 class="dialog-title">标题</h1>
<button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="关闭"></button>
</div>
<div class="dialog-body">
<p>正文放在这里。</p>
</div>
<div class="dialog-footer">
<button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">关闭</button>
</div>
</dialog>
三段结构对应 .dialog-header、.dialog-body、.dialog-footer，标题用 .dialog-title。关闭动作统一写 data-bs-dismiss="dialog"，加在任意 <button> 上即可。
常用 data 属性
| 属性 | 作用 |
|---|---|
data-bs-toggle="dialog" + data-bs-target="#id" | 声明式打开对话框 |
data-bs-dismiss="dialog" | 关闭并移除遮罩 |
data-bs-backdrop="static" | 点遮罩不关闭 |
data-bs-modal="false" | 以非模态方式打开，页面其他区域仍可交互 |
data-bs-theme="dark" | 深色对话框，遮罩配色一并切换 |
尺寸和动效通过类名控制：.dialog-scrollable（内容区滚动）、.dialog-fullscreen、lg-down:dialog-fullscreen（小于 lg 时全屏）、.dialog-slide-up / .dialog-slide-down（滑入方向）、.dialog-instant（去掉动画）。尺寸档位是 .dialog-sm、.dialog-lg、.dialog-xl。
用 JavaScript 打开
const myDialog = new bootstrap.Dialog('#myDialog', {
keyboard: false,
backdrop: 'static'
})
myDialog.show()
keyboard: false 禁用 Esc 关闭，backdrop: 'static' 把 data-bs-backdrop="static" 的行为搬到配置里。方法返回 Promise，可以 await 打开/关闭完成，再和 shown.bs.dialog / hidden.bs.dialog 事件配合。
和 5.3 Modal 的差别
| 5.3 Modal | 6.0 Dialog |
|---|---|
.modal → .modal-dialog → .modal-content 三层嵌套 | 一个 <dialog class="dialog"> |
遮罩是独立生成的 .modal-backdrop 元素 | 用 ::backdrop 伪元素，没有额外交互元素 |
| 焦点管理、Esc、滚动锁定由 JavaScript 实现 | 浏览器原生 showModal() 负责 |
data-bs-dismiss="modal" | data-bs-dismiss="dialog" |
常见坑
<button>一定写type="button"，否则放在表单里会触发提交。- 关闭按钮的属性值从
modal改成了dialog，照抄 5.3 代码会导致按钮失效。 - 对话框里要放下拉菜单、提示气泡时，给
<dialog>加.not-prose，避免正文排版规则干扰浮层定位。 - 需要点击遮罩关闭，就别写
backdrop: 'static'；两者是互斥的。
对应文档页