dialog.show()仅切换display和open属性，不阻断背景交互、不居中、不禁止滚动，需手动处理遮罩、定位、焦点、滚动及状态重置。
dialog.show() 能实现非模态弹窗，但它不是“点击遮罩关闭”或“自动居中”的傻瓜式组件——它只负责显示，其余交互逻辑全得你补。
为什么 show() 显示后背景还能点、滚动条还在动
dialog.show() 不启用浏览器原生模态栈，所以不会禁用底层交互、不锁定焦点、不拦截 Esc、也不阻止页面滚动。它本质就是把 display: none 切成 display: block 并加个 open 属性，仅此而已。
- 若想禁用背景点击，得自己给 body 加
pointer-events: none或覆盖层 - 若要禁止滚动，需在显示时设
document.body.style.overflow = 'hidden'，关闭时还原 - 焦点不会自动跳入 dialog，得手动
dialog.querySelector('button, input')?.focus() - Tab 键会穿透 dialog，必须监听
keydown拦截并循环聚焦内部可聚焦元素
如何让 show() 弹窗真正“浮”在页面上
原生 dialog 默认定位依赖文档流，不自动居中，也不带 z-index。直接调用 show() 后很可能贴着顶部左上角显示，甚至被其他元素遮挡。
- 必须用 CSS 显式设置：
dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; } - 别依赖
::backdrop——show()根本不触发 backdrop 渲染（只有showModal()才可能） - 如果需要遮罩效果，得额外加一个
<div class="overlay"></div>并控制显隐 - 注意 Safari 对
fixed+transform在dialog上的渲染有偏移 bug，建议加margin: 0和border: none重置
关闭非模态 dialog 时容易漏掉的三件事
dialog.close() 只是移除 open 属性并触发 close 事件，DOM 还在，状态也没清——这对非模态场景尤其危险。
- 没手动恢复
document.body.style.overflow，会导致页面滚动被锁死 - 没重置焦点，用户按 Tab 可能跳进已关闭 dialog 的残留 tab 顺序里
- 没清空表单或重置
dialog.returnValue，下次再show()时可能带着上次的值 - 别监听
click判断e.target === dialog来关——非模态下这个判断不可靠，推荐统一用按钮触发dialog.close()
非模态 dialog 最大的陷阱在于：它看起来像弹窗，行为却接近 div。你得亲手搭所有支撑逻辑，而不能指望浏览器替你管焦点、滚动、遮罩或可访问性。真要轻量浮层，show() 可用；但凡涉及用户操作引导，showModal() 加手动 backdrop 补丁反而更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
