根本原因是iframe创建独立堆叠上下文，使父modal的z-index失效；修复需避免触发新堆叠上下文的CSS属性、正确设置iframe父容器定位与z-index；动态设src触发两次请求源于display切换引发重排重载；子页面modal遮罩须由父页接管并监听postMessage；原生dialog在iframe中backdrop不渲染，应手写遮罩层。
iframe在modal中被遮挡，z-index无效？
根本原因不是z-index没设对，而是iframe自身创建了独立的堆叠上下文（stacking context），导致父级modal的z-index完全无法影响其内部渲染层级。哪怕你把modal设成z-index: 999999，iframe里的按钮、下拉菜单、二级弹窗依然会被盖住。
常见表现：iframe内打开的select下拉框、Bootstrap dropdown、Element UI el-date-picker 面板，全被modal背景或兄弟元素裁切/遮挡；滚动后遮挡更明显。
- 必须确保iframe所在容器没有
transform、opacity、filter等触发新堆叠上下文的CSS属性 - iframe标签本身不能设
z-index（它不是定位元素），要改的是它的父容器 - 若modal用
position: fixed，iframe容器需同步设position: relative或absolute，否则层级关系断裂
为什么动态设置src会触发两次请求？
不是网络问题，是DOM重排引发的iframe“重加载”。典型写法：frame.src = url → modal.style.display = 'block'，浏览器在display切换瞬间会强制重载iframe——因为visibility状态变化触发了渲染树重建。
现象：Network里看到两个相同URL、initiator为“DOM modification”的请求；第二个响应常被丢弃，但浪费带宽且可能触发重复接口逻辑。
立即学习“前端免费学习笔记（深入）”；
- 修复方案一（推荐）：先设
display: block，再赋值src，保证iframe在可见状态下加载 - 修复方案二：用
iframe.hidden = true代替display: none，隐藏时不触发重排 - 生产环境尤其要注意：Vue/React中v-if或useEffect依赖变化若顺序错乱，极易复现此问题
子页面modal要盖住整个父页，该监听什么事件？
不能靠子页面自己画一个全屏遮罩——它永远困在iframe视口内。必须由父页面接管遮罩层，并响应子页面发来的信号。
关键点：子页面调用window.parent.postMessage()通知开关状态，父页面用window.addEventListener('message', ...)接收，再操作真实DOM。
- 子页面发送：
window.parent.postMessage({ type: 'MODAL_OPEN' }, '*') - 父页面监听时务必校验
event.origin，避免XSS；不要用"*"在生产环境 - 遮罩层必须插入到
document.body最外层，不能嵌在某个组件内部，否则可能被Vue/React的portal机制截断 - 滚动时需同步更新遮罩层
height：监听document.documentElement.scrollHeight而非window.innerHeight
原生
不是bug，是规范限制：<dialog></dialog>的backdrop仅在调用showModal()时生成，且要求该元素必须是document.body的直接子节点。iframe内创建的<dialog></dialog>，无论怎么调用showModal()，backdrop都不会渲染或响应点击。
强行在iframe里用<dialog></dialog>的结果：能看到弹窗，但灰色遮罩缺失，点击空白无反应，Esc键也无效。
- 绕过方式：放弃
<dialog></dialog>，手写遮罩层 ——<div class="overlay"></div>+<div class="modal"></div> - overlay必须有
width: 100vw; height: 100vh;，空div靠内容撑开会塌陷 - Safari需额外加
dialog::backdrop { background: rgba(0,0,0,0.5); }，且只支持15.4+ - 监听关闭时用捕获阶段：
document.addEventListener('click', handler, true)，配合modal.contains(e.target)判断点击是否在内部
MODAL_CLOSE消息，导致父页面遮罩残留。 
