弹出 div/iframe 禁用其他控件？答案

【问题标题】：Popup div/iframe disables other controls?弹出 div/iframe 禁用其他控件？
【发布时间】：2016-07-20 19:04:06
【问题描述】：

我正在尝试在按下按钮时显示和隐藏（切换）iframe 窗口。 iframe 应该涵盖我的一些控件，但我需要它们仍然工作。

出于某种原因，即使根本没有涉及，某些控件也会被禁用。我对css做错了吗？

这是我的代码：

function ToggleIframe(){

  $( ".iframeHolder" ).toggleClass( "iframeHolderShow" );

}

.iframeHolder {
  padding-top: 100px;
  display: none;
  position: absolute;
  z-index:99999;
}

.iframeHolderShow {
  padding-top: 150px;
  margin-left:100px;
  left:10px;
  display: inline;
  position: absolute;
  z-index:99999;
}

.backgroundDiv{
  margin-left:100px;
  
  width: 420px;
  height: 400px;
  border-style:solid;
  border-size:1px;
  color:#3498db;
  background-color:#ffffe6;
  z-index: 1;
}

button {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #3498db;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-bottom:20px;
  border:none;
}

button:hover {
  background: #3cb0fd;
  text-decoration: none;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js">
</script>

    <button id="btnShowHideIframe" onclick="ToggleIframe()">
        Show/Hide
    </button>

<div class="iframeHolder">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/6KxtgS2lU94" frameborder="0">
    </iframe>
</div>

<div id="backgroundDiv" class="backgroundDiv"> 
    <button id="btn2ShowHideIframe" onclick="ToggleIframe();">
        Show/Hide 2
    </button>
</div>

当 iframe 出现在蓝色 div 中时，您可以看到第二个按钮 (Show/Hide2) 是如何变为非活动状态的。

为了看得更清楚，这里也有一个关于 codepen 的链接：

http://codepen.io/ZlatinaNyagolova/pen/VjQKJo

我将继续在那里工作（如果代码中存在不准确之处，敬请期待）。

【问题讨论】：

@charlietfl - 即使我完全删除 z-index 属性也是一样的：\
如果将按钮和 iframe 包装在同一个容器中，会简单得多。 <div><toolbar/><iframe></div>

标签： jquery css iframe

【解决方案1】：

问题出在 CSS 中的 padding-top 属性中。我用它来定位我的 iframe，但它在下面悬停了一些控件。因此，作为替代方案，我只使用了top - 这不会影响我的其他控件并且 iframe 仍然正确定位。

【讨论】：