提到原生的 dialog 元素，不少前端开发者的第一反应是“很简单，加上 open 属性不就弹出模态框了吗？”然而一旦进入真实生产环境，Safari 与 Chrome 的行为差异、模态栈的层级管理、点击背景关闭时的坐标判定、表单提交导致的页面刷新……每个细节都可能让原本顺畅的用户交互瞬间出问题。今天就把这几个常见的踩坑点一次性梳理清楚——不是什么深奥的理论，全是实际项目中必须掌握的基础要点。
dialog 必须是 body 的直接子元素才能正确渲染 backdrop 遮罩层
否则在 Safari 以及部分 Chrome 版本下，::backdrop 伪元素根本不会出现，导致遮罩缺失、背景可点击、视觉上没有隔离效果。这并非单纯的样式问题，而是浏览器对 dialog 定位上下文提出的硬性规范。
常见的错误结构： 或嵌套在 、 内部。这些父容器若设置了 position: relative、transform、overflow 等属性，都会干扰 dialog 的内置居中逻辑以及 backdrop 的渲染行为。
- ✅ 正确写法：
- ❌ 错误写法：
或 - 若在使用 React/Vue 这类框架时进行开发需要特别注意——挂载点务必选择
