核心区别在于交互阻断能力：showModal()是模态对话框，禁用背景交互、支持Esc关闭、自动聚焦并添加backdrop；show()仅为非模态浮层，不拦截操作、无backdrop、不管理焦点。
dialog.showModal() 和 dialog.show() 的区别在哪
核心区别是交互阻断能力：showModal() 会锁住页面焦点、禁用背景点击、拦截 Esc 键（自动关闭），而 show() 只是把对话框显示出来，用户仍可自由操作页面其他区域——它本质上是个“非模态浮层”。
实际选哪个，取决于你要解决的问题：
- 需要强制用户先处理弹窗（如确认删除、登录验证）→ 用
showModal() - 只是辅助信息提示（如帮助说明、快捷操作面板）→
show()更轻量，也更符合无障碍逻辑 - 注意：
showModal()会自动将焦点移到对话框内第一个可聚焦元素；如果没设，可能聚焦到<dialog>自身，导致键盘操作异常
dialog::backdrop 样式不生效的常见原因
::backdrop 是控制遮罩层的唯一标准方式，但它有硬性前提：必须由 showModal() 触发才存在。用 show() 或直接加 open 属性，::backdrop 完全不会渲染。
另外几个容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- Chrome 96+ 和 Safari 15.4+ 才稳定支持
::backdrop，旧版 Safari 会静默忽略——别指望它降级 fallback - CSS 里写
dialog::backdrop { background: rgba(0,0,0,0.4); }没问题，但加!important可能被浏览器忽略（规范未定义优先级） - 遮罩层默认 z-index 很高，但如果你手动给
<dialog>设了z-index: 9999，而 backdrop 的层叠上下文被切断，就会“看不见遮罩”——建议不要动<dialog>的z-index
表单提交后如何安全关闭 dialog 并获取返回值
用 method="dialog" 的表单是原生方案里最干净的交互路径，它让按钮点击自动触发 close()，且能把 value 作为参数传出去。
关键点在于事件监听和返回值处理：
- 监听
close事件，而不是submit：因为表单提交后 dialog 已关闭，submit事件可能来不及捕获 -
dialog.close('confirmed')中的字符串会成为event.returnValue，但仅当 dialog 是通过showModal()打开时才有效 - 别在表单里写
onsubmit="return false"或调用event.preventDefault()——这会阻止method="dialog"的默认行为
示例片段：
<dialog id="confirmDialog">
<p>确定要删除吗？</p>
<form method="dialog">
<button value="yes">确定</button>
<button value="no">取消</button>
</form>
</dialog>
<script>
const dialog = document.getElementById('confirmDialog');
dialog.addEventListener('close', () => {
if (dialog.returnValue === 'yes') {
// 执行删除逻辑
}
});
</script>
dialog 元素的默认样式和居中逻辑为什么经常失效
<dialog> 默认是 display: block + position: absolute，但它的定位基点不是视口，而是最近的「定位上下文」祖先。这意味着如果父容器用了 position: relative，dialog 就会相对于它定位，而不是屏幕居中。
真正可靠的居中方式只有两种：
- 用
position: fixed+top: 50%+left: 50%+transform: translate(-50%, -50%)（兼容性最好） - 用
display: grid+place-items: center+position: fixed+inset: 0（现代写法，Safari 15.4+ 支持） - 绝对不要依赖浏览器默认的居中行为——不同版本 Chrome 对
<dialog>的初始top/left计算逻辑不一致
另外，<dialog> 默认有 margin: 0 auto，但这个 margin 在 position: fixed 下无效，所以必须显式设置宽高或用 flex/grid 控制内容尺寸。
