如果页面需要确认删除、编辑配置或填写一次性表单，最省事的原生方案是把内容放进 ，再调用 showModal()。它不只是把盒子显示出来：浏览器会把 dialog 放到 top layer，并让同一文档里 dialog 之外的内容进入 inert 状态，所以背景按钮不能点击，键盘焦点也不会继续跑到页面上。
官方资料：https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal
要阻止背景页面交互，关键不是给背景加一层半透明遮罩，而是使用dialog.showModal()。如果使用的是show()或只写了open属性，dialog 是非模态的，背景仍然可以交互。
为什么 showModal 能挡住背景内容
showModal() 会把 dialog 放进浏览器管理的 top layer，并生成可用 ::backdrop 设置样式的背景层。此时，除了 dialog 及其后代，同一 Document 中的节点都会按 inert 处理。
inert 不等于“看不见”。它主要改变交互语义：背景内容不能被点击、聚焦、编辑，也不会正常出现在辅助技术的交互范围中。遮罩负责让用户看出当前页面被阻塞，inert 才是阻止交互的关键。
最小写法：打开、关闭和恢复焦点
打开按钮只负责调用 showModal()，关闭动作放在 dialog 内部。下面的示例保留了中文注释，展示按钮关闭、表单关闭和取消事件各自适合处理什么。
这里的 form method="dialog" 会关闭 dialog，并把提交按钮的 value 放到 returnValue。默认情况下，模态 dialog 也支持 Esc 关闭；如果业务必须二次确认，可以在 cancel 事件里调用 event.preventDefault()，但一定要给出另一个明确的关闭路径。
show、open 和 showModal 的区别
最常见的误区是把“显示出来”和“模态”混为一谈：
| 写法 | 模式 | 背景是否 inert | 适合场景 |
|---|---|---|---|
dialog.showModal() | 模态 | 是，同一 Document | 确认、编辑、必须先完成的表单 |
dialog.show() | 非模态 | 否 | 可并行查看的浮动面板 |
| 非模态 | 否 | 静态初始状态，不建议代替方法调用 |
如果 showModal() 报 InvalidStateError，先看 dialog 是否已经用 show() 打开，或者是否已经处于打开状态。不要在同一个打开状态上重复调用；关闭后再重新调用即可。
三个容易漏掉的边界
第一，遮罩不是业务逻辑。可以用 dialog::backdrop 调暗背景，但不要只靠 z-index 和遮罩拦截点击；那样焦点、辅助技术和键盘行为仍需要自己补齐。
第二，焦点要有去处。给 dialog 设置合适的初始焦点，关闭后把焦点还给触发按钮，避免键盘用户回到页面顶部或落到不可见节点。
第三，iframe 只阻塞自己的文档。如果 dialog 在 iframe 中，showModal() 只会让该 iframe 所属 Document 的其他内容不可交互，外层页面不会自动一起被锁住。跨文档遮罩需要由外层页面另行设计。
相关问题
showModal 会自动添加 inert 属性吗？
不一定表现为每个背景元素都出现一个可见的 inert 属性，但浏览器会按模态 dialog 的规则让背景节点进入 inert 交互语义。应用代码通常不需要逐个给背景节点加属性。
能不能点击 dialog 外部关闭？
不要把“点击 backdrop”当作默认行为。是否允许轻量关闭取决于你的关闭策略；更稳妥的做法是在 dialog 内提供取消按钮，并保留 Esc 的可预期行为。
为什么我加了 z-index 仍然挡不住页面？
z-index 只解决绘制层级，不能替代模态语义。将打开方式改为 showModal()，再为 ::backdrop 配置视觉样式，背景交互才会同时被浏览器阻断。
