Question

我正在尝试按下按钮时显示和隐藏（切换）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中时，您可以看到第二个按钮（显示/隐藏2）如何变为非活动状态。

为了更清楚地看到，这里也是codepen的链接：

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

我将继续在那里工作（如果代码中存在不准确的情况，请继续）。

Answer 1

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

弹出式div / iframe会禁用其他控件吗？

1 个答案: