javascript - 如何在父级之上显示 iframe 弹出窗口？

Question

我有一个用作页脚的 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 作为弹出框

Answer 1

这里的关键词是堆叠上下文。查看您的问题的这个缩小示例，它应该按预期工作:

(请以整页模式运行代码片段)

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。