只有showModal()才能实现真正模态效果，show()仅显示不阻塞；close()同步清除open属性并触发close事件；需手动监听遮罩点击和Esc键以确保自定义逻辑执行；Safari兼容性有限，建议检测支持并降级。
dialog 标签必须用 showModal() 才能真正阻塞交互
直接调用 show() 不会禁用背景页面，也不触发 close 事件，用户仍可点击背后元素——这不是真正意义上的“模态弹窗”。只有 showModal() 才让浏览器进入模态状态，自动聚焦到 dialog 内、拦截 Tab 键跳出、阻止背景滚动（部分浏览器需配合 body { overflow: hidden }）。
常见错误是写成：
close() 方法只对已打开的 dialog 生效，且不触发 showModal() 的返回值
close() 是唯一标准关闭方式，但前提是 dialog 已通过 showModal() 或 show() 打开。未打开时调用会静默失败（无报错，但无效果）。它不会自动移除 open 属性——实际上，close() 会**同步清除** open 属性，这是它的设计行为。
- 关闭后可通过
dialog.open === false检测状态 - 若想在关闭后执行逻辑，监听
close事件比轮询更可靠：dialog.addEventListener('close', () => { console.log('用户已关闭，reason:', dialog.returnValue); // 可读取 returnValue }); - 注意：Safari 目前（v17+）仍不支持
close()的returnValue参数传递
点击遮罩层或按 Esc 关闭需手动监听，close() 不自动绑定
浏览器默认允许点击 dialog 外部区域或按 Esc 关闭 showModal() 弹窗，但这个行为**不触发你自定义的关闭逻辑**。比如你想记录关闭原因、清空表单、或发请求，必须自己监听：
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close(); // 显式调用，确保触发 close 事件
}
});
dialog.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
e.preventDefault();
dialog.close();
}
});漏掉这些监听，会导致用户点了遮罩没反应（某些 CSS 重置了默认行为），或 Esc 按下后逻辑未执行。
立即学习“前端免费学习笔记（深入）”；
兼容性与 fallback 必须考虑，尤其 Safari 和旧版 Chrome
Chrome/Edge 94+、Firefox 98+ 原生支持完整 dialog；Safari 15.4+ 仅支持 showModal() 和 close()，但不支持 returnValue 和 cancel 事件；iOS Safari 16.4+ 才开始稳定支持。
生产环境建议：
- 用
'dialog' in document.createElement('div')检测原生支持 - 不支持时降级为
position: fixed+ 手动管理焦点和 backdrop - 避免依赖
dialog.returnValue传参，改用闭包或 data 属性暂存上下文
原生 dialog 看似简单，但关闭路径分散（按钮、Esc、遮罩、脚本调用）、事件时机微妙（close 在 beforeunload 后触发）、focus 管理易出错——这些才是实际项目里卡住最多的地方。
