如何在父级上方显示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中的代码基本相同，但是使用div作为iframe内弹出窗口

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。