我有一个用作页脚的 iframe。这个 iframe 显示一个弹出窗口(iframe 有一个按钮,它包含弹出窗口)但是当我在页面上使用它时,弹出窗口位于包含的 div 后面。
如何在父窗口中显示部分弹出窗口。
已更新
现在有一些代码:
iframe 有一个弹出窗口:
https://codepen.io/oscarryz/pen/MNdjGm
<div class="page">
<div class="footer">
<button id="showpopup">Show popup</button>
<div id="infobox" class="hidden">PopUp</div>
</div>
</div>
内容使用 iframe 作为弹出窗口
https://codepen.io/oscarryz/pen/rXgvNM
<div class="page">
<div class="content">Content</div>
<div class="footer">
<iframe src="https://codepen.io/oscarryz/full/MNdjGm" style='border:0;width:100%;height:500px;overflow:hidden' frameborder="0"></iframe>
</div>
</div>
这与 this answer 中的代码基本相同但是在 iframe 中使用一个 div 作为弹出框
最佳答案
这里的关键词是堆叠上下文。 查看您的问题的这个缩小示例,它应该按预期工作:
(请以整页模式运行代码片段)
document.getElementById('showpopup').addEventListener('click',function() {
document.getElementById('infobox').classList.remove('hidden');
});
body {
padding: 0;
margin: 0;
text-align: center;
}
.page {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
.content {
height: 80%;
width: 100%;
background: #eee;
}
.footer {
height: 20%;
width: 100%;
background: #444;
}
#showpopup {
margin: 3em;
}
#infobox {
height: 200px;
width: 80%;
position: absolute;
bottom: 15%;
left: 10%;
}
.hidden {
display: none;
}
<div class="page">
<div class="content">Page Content</div>
<div class="footer">
<button id="showpopup">Show iframe</button>
</div>
<iframe id="infobox" class="hidden" src="https://bing.com"></iframe>
</div>
现在,与您的页面不同的是,您的页面使用 z-index 作为主要内容,或者其他元素和 iframe 的绝对定位。如果 iframe 具有较低的 z-index 或在其他绝对定位元素之前添加到文档中,它将隐藏在它后面:
document.getElementById('showpopup').addEventListener('click',function() {
document.getElementById('infobox').classList.remove('hidden');
});
body {
padding: 0;
margin: 0;
text-align: center;
}
.page {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
.content {
height: 80%;
width: 100%;
background: #eee;
z-index: 99; // PROBLEM CAUSE A
position: absolute; // PROBLEM CAUSE B
}
.footer {
height: 20%;
width: 100%;
background: #444;
position: absolute;
bottom: 0;
}
#showpopup {
margin: 3em;
}
#infobox {
height: 200px;
width: 80%;
position: absolute;
bottom: 15%;
left: 10%;
}
.hidden {
display: none;
}
<div class="page">
<div class="footer">
<button id="showpopup">Show iframe</button>
</div>
<iframe id="infobox" class="hidden" src="https://bing.com"></iframe>
<div class="content">Page Content</div>
</div>
要解决这个问题,您要么需要将 iframe 在文档中下移,要么给它本身更高的 z-index。
关于javascript - 如何在父级之上显示 iframe 弹出窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57436083/