ポップアップdiv/iframeは他のコントロールを無効にしますか？

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ボタン（表示/ Hide2）が非アクティブになりますどのようにあなたが見ることができます。

それがより明確に表示するには、ここでもcodepenのリンクです：

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

私はそこにそれに取り組んでいきます（コード内の不正確さがある場合には年度）。