HTML对话框dialog结构详解

使用 showModal() 打开模态框，不要依赖 open 属性

open 属性仅控制初始显隐，不会添加 backdrop、锁定背景、响应 Esc 按键，也不触发 close 事件。点击背景或键盘操作均无反馈。

真正的模态行为必须通过 dialog.showModal() 触发。该方法会自动聚焦、禁用背景交互、生成 dialog::backdrop，并让 Esc 键关闭生效。

注意要点：

• 调用 showModal() 前确保
  已存在于 DOM 中，不要在 中提前执行 JS
• 避免使用 dialog.open = true 或 dialog.setAttribute('open', '')，这些均不构成模态行为
• dialog.show() 仅生成非模态浮层，适用于 tooltip 或消息提示，不适合对话框场景

结构必备：autofocus、标题、关闭控件缺一不可

若

最小可用结构示例：

  
确认删除
  
该操作不可撤销
  确定
  取消

关键要素汇总：

• 至少一个元素添加 autofocus（通常为首个按钮）
• 必须包含
  或
  标题，并通过 aria-labelledby 关联
• 关闭按钮需添加 type="button"，防止意外触发表单提交
• 内部不能为空，也不能仅有文字而无交互控件

遮罩点击关闭需手动监听，Safari 旧版需特殊处理

dialog::backdrop 默认不支持点击关闭，这不是 bug 而是规范。要实现“点击背景关闭”，必须手动添加逻辑。

基础监听代码：

dialog.addEventListener('click', e => {
  if (e.target === dialog) dialog.close();
});

然而 Safari 15.4 至 16.3 版本中，该方法可能失效——e.target 有时会变成 ，导致判断失败。需要降级方案：

• 使用 e.clientX / e.clientY 与 dialog.getBoundingClientRect() 比较，判断点击是否在区域外
• 或手动模拟一层 div.backdrop，配合 dialog.show() 使用
• 生产环境建议直接引入 dialog-polyfill，统一处理浏览器差异

常见遗漏：许多开发者仅给关闭按钮绑定 click 事件，却忽略了 backdrop 点击和 Esc 按键处理，导致键盘或触屏用户打开对话框后无法关闭。