我的网站使用多个弹出窗口，其中一些包含视频。第一个视频取代所有其他视频。我使用html，css和javascript

Question

第一个弹出窗口中的视频否决了其他弹出窗口中的所有其他视频。

我希望你们能帮我解决这个问题。它似乎是第一个弹出窗口，它的代码覆盖了所有其他弹出窗口，并用于替换所有视频。

下面是一个弹出的HTML，它是在所有其他的弹出窗口相同：

<!-- link on homepage --> 
<div class="pure-u-1-2"> 
    <br> 
    <div class="blackbg image"> 
     <h2>If I Remember Correctly...</h2> 
     <a href="#21-ifiremembercorrectly"><img src="images/home- 
     ifiremembercorrectly.png"></a> 
    </div><br> 
</div> 
<!-- Pop-up --> 
<div id="21-ifiremembercorrectly" class="modalDialog pure-g"> 
    <div> 
     <a href="#close" title="Close" class="close">&times;</a> 
     <div id="scrollable01"> 
      <h1>If I Remember Correctly... (2017)</h1> 
      <p><i>title</i><br><br> text 
       <br><br></p> 
      <div class="videocontainer"><iframe id="vi-ifiremembercorrectly" class="video" width="960" height="540" src="https://www.youtube.com/embed/IsdtZ46oPbc? 
     rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen> 
     </iframe></div><br><br> 
      <img src="images/home-ifiremembercorrectly_black.png"><br><br> 
      <img src="images/ifiremembercorrectly-02.png"><br><br> 
     </div> 
    </div> 
</div> 

这是弹出的CSS：

.modalDialog { 
    position: fixed; 
    font-family: 'GT Cinetype Trial Light', Helvetica; 
    font-size: 15px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,1); 
    z-index: 99999; 
    opacity: 0; 
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in; 
    transition: opacity 200ms ease-in; 
    pointer-events: none; 
    color: white; 
    letter-spacing: 0px; 
} 

.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
} 

.modalDialog > div { 
    width: 50%; 
    height: 80%; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    background: black; 
} 

p { 
    max-width: 480px; 
} 

.close { 
    background: black; 
    color: white; 
    line-height: 25px; 
    position: absolute; 
    right: -6px; 
    text-align: center; 
    top: -5px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 25px; 
} 

.close:hover { 
    background: #000; 
} 

#scrollable01 { 
    height: 100%; 
    overflow: scroll; 
} 

最后，这里是一个链接到网站。这可能有助于我猜的最多： http://www.jurritvanderploeg.nl/

在此先感谢！希望一切都清楚我所要求的帮助。

Answer 1

它可以通过CSS

.modalDialog { 
    position: fixed; 
    font-family: 'GT Cinetype Trial Light', Helvetica; 
    font-size: 15px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,1); 
    z-index: 99999; 
    opacity: 0; 
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in; 
    transition: opacity 200ms ease-in; 
    pointer-events: none; 
    color: white; 
    letter-spacing: 0px; 
} 

你设置的背景为黑色引起的，所以它会取代在背景上的所有视频，如果你改变背景颜色为透明或删除它，它应该工作，它会显示在背面的所有视频