对话框 Dialog

需要用户专注处理的短任务：验证邮箱、确认删除、找回申请。基于原生 <dialog>：打开后背景不可交互、焦点自动移入、Esc 关闭、关闭后焦点回到触发按钮，这些都由浏览器提供。

基础对话框

examples/dialog/basic.html

html

<button type="button" data-cb-dialog-open="verify">验证邮箱</button>

<dialog id="verify" data-cb-dialog aria-labelledby="verify-title"
        class="m-auto max-h-[90vh] w-[calc(100%-2rem)] max-w-md overflow-hidden rounded-xl border border-border
               bg-card p-0 shadow-xl backdrop:bg-foreground/40 open:animate-cb-dialog">
  <form method="dialog" class="flex max-h-[90vh] flex-col">
    <div class="px-6 pt-6 pb-3">标题 + 关闭按钮</div>
    <div class="min-h-0 flex-1 overflow-y-auto px-6">内容（过长时滚动）</div>
    <div class="mt-5 flex flex-col-reverse gap-3 border-t border-border px-6 py-5 sm:flex-row sm:justify-end">按钮</div>
  </form>
</dialog>

属性 / 方法	说明
`data-cb-dialog-open="id"`	点击打开指定对话框
`data-cb-dialog-close`	点击关闭所在对话框；按钮的 `value` 会成为 `dialog.returnValue`
`data-cb-dialog-static`	点击遮罩和按 `Esc` 都不关闭
`CbtisUI.openDialog(id)` / `closeDialog(id)`	JS 调用
原生 `close` 事件	关闭后触发，读取 `dialog.returnValue` 判断用户选择

确认对话框

不可撤销的操作。使用 role="alertdialog" 与 data-cb-dialog-static，默认焦点放在「取消」上（autofocus）。

examples/dialog/confirm.html

尺寸

宽度	用途
`max-w-sm`（384px）	确认对话框
`max-w-md`（448px，默认）	简单表单
`max-w-2xl`（672px）	添加董事等较长表单

使用建议

无障碍

必须有 aria-labelledby 指向标题；确认对话框再加 aria-describedby
关闭图标按钮带 aria-label
页面滚动在打开期间自动锁定（base.css 中 html:has(dialog[open][data-cb-dialog])）

与 v2 的差异

v2 现状	规范
`div[role=dialog]` + 手动监听 Esc，没有焦点管理，背景仍可 Tab 聚焦	原生 `<dialog>` + `showModal()`
打开时页面仍可滚动	自动锁定滚动
没有进场动画	`open:animate-cb-dialog`，并尊重「减少动态效果」设置

对话框 Dialog ​

基础对话框 ​

确认对话框 ​

尺寸 ​

使用建议 ​

无障碍 ​

与 v2 的差异 ​

对话框 Dialog

基础对话框

确认对话框

尺寸

使用建议

无障碍

与 v2 的差异