iframe内弹窗被父页遮挡的根本原因是iframe创建了独立堆叠上下文，修复需确保其直接父容器无transform等触发属性，并由父页统一管理遮罩层、同步滚动与焦点。
iframe内弹窗被父页遮挡，不是z-index没设对
根本原因是iframe自身创建了独立的堆叠上下文（stacking context），导致父级 modal 的 z-index 完全失效。哪怕你把 modal 设成 z-index: 999999，iframe 里的 select 下拉、el-date-picker 面板、Bootstrap dropdown 依然会被裁切或盖住。
关键修复点不在 iframe 标签本身（它不支持 z-index），而在它的**直接父容器**：
- 确保该容器没有
transform、opacity、filter等触发新堆叠上下文的 CSS 属性 - 若父 modal 使用
position: fixed，iframe 容器必须设为position: relative或position: absolute，否则层级链断裂 - 不要给 iframe 容器加
will-change: transform—— 它也会隐式创建堆叠上下文
遮罩层必须由父页面统一管理，不能靠子页自己画
子页面在 iframe 内调用 document.body.append(overlay)，遮罩永远只覆盖 iframe 视口，不可能盖住父页其他区域。正确做法是：子页通过 postMessage 通知父页开关状态，由父页操作真实 DOM。
子页面发送信号：
立即学习“前端免费学习笔记（深入）”；
window.parent.postMessage({ type: 'MODAL_OPEN', payload: { id: 'user-edit' } }, 'https://your-parent-domain.com');
父页面监听并校验来源（生产环境禁用 "*"）：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
window.addEventListener('message', (e) => {
if (e.origin !== 'https://your-iframe-domain.com') return;
if (e.data.type === 'MODAL_OPEN') {
document.getElementById('overlay').style.display = 'block';
}
});
- 遮罩层 DOM 必须挂载在
document.body最外层，不能嵌在 Vue/React 组件内部，否则可能被 portal 截断 - 滚动时需同步更新遮罩高度：
overlay.style.height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) + 'px';
全屏遮罩必须用 position: fixed + 100vw/100vh
用 width: 100% + height: 100% 是常见错误——它依赖父容器高度，一旦父容器没设高或有 overflow: hidden，遮罩就漏白。
正确写法（兼容滚动与缩放）：
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5);
pointer-events: auto;
}
- 避免用
opacity: 0.5单独控制透明度，配合background-color: rgba()更可靠 - 移动端 Safari 需额外处理滚动穿透：打开遮罩时记录
window.scrollY，给<body>加style="position: fixed; top: -${scrollY}px;"；关闭时恢复并window.scrollTo(0, savedScrollY) - 别忘了按
Escape关闭：监听document的keydown，检查e.key === 'Escape'且遮罩当前可见
动态设置 src 触发两次请求？顺序错了
典型错误写法：iframe.src = url; modal.style.display = 'block';。display 切换会强制重排，导致 iframe 在隐藏状态下被销毁重建，从而发起第二次请求（Network 中看到两个 initiator: DOM modification）。
修复方式只有两种有效：
- 先让容器可见，再赋值
src：modal.style.display = 'block'; iframe.src = url; - 改用
iframe.hidden = true替代display: none，隐藏时不触发重排
Vue/React 用户尤其注意：v-if 或 useEffect 依赖项顺序错乱（比如先更新 src 再更新显示状态），极易复现此问题。
真正难的不是写遮罩，而是让 iframe 和父页在渲染层级、事件流、滚动状态、焦点管理上保持同步——这些细节一漏，遮罩就变成“半透明 bug 发射器”。
