添加灯箱遗址CSS

Question

我想添加一个灯箱来播放视频，而不是重定向到页面，以便用户留在网站上。

我使用的代码如下：https://codepen.io/DonnaG/pen/pgHtz

我有7个灯箱，加上前两个是好的，但是当我添加第三，它破坏了剩余的4

---

的CSS

基本上，有三个灯箱以这种形式：

<section id="one" class="wrapper spotlight style4"> 
    <div class="inner"> 
     <a href="#wayhome" class="image"><img src="images/pic01.jpg" alt="" /></a> 
     <div class="content"> 
      <h2 class="major">Name</h2> 
      <p> Description </p> 
      <a href="#wayhome" class="special">Watch the Trailer</a> 
      <a href="#_" class="lightbox" id="wayhome"> 
      <div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;"> 
       <div class="modal-header"><h3></h3></div> 
       <div class="modal-body"><iframe width="870" height="489" src="https://player.vimeo.com/video/231027224" frameborder="0" allowfullscreen=""></iframe></div> 
      </div> 
     </div> 
    </div> 
</section> 

即废墟本节中的样式：

<section id="four" class="wrapper alt style1"> 
    <div class="inner"> 
     <h2 class="major">Witness Me</h2> 
     <p>More projects I've worked on, from shorts to promos to documentaries.</p> 
     <section class="features"> 
      <article> 
       <a href="#natural" class="image"><img src="images/pic06.jpg" alt="" /></a> 
       <h3 class="major">A</h3> 
       <p>B</p> 
       <a href="#natural" class="special">Watch me</a> 
       <a href="#_" class="lightbox" id="natural"> 
       <div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;"> 
        <div class="modal-header"><h3></h3></div> 
        <div class="modal-body"><iframe width="870" height="489" src="https://player.vimeo.com/video/xxx" frameborder="0" allowfullscreen=""></iframe></div> 
       </div> 
      </article> 
      <article> 
       <a href="#5374" class="image"><img src="images/pic07.jpg" alt="" /></a> 
       <h3 class="major">A</h3> 
       <p>B</p> 
       <a href="#5374" class="special">Watch me</a> 
       <a href="#_" class="lightbox" id="5374"> 
       <div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;"> 
        <div class="modal-header"><h3></h3></div> 
        <div class="modal-body"><iframe width="870" height="489" src="https://player.vimeo.com/video/xxx" frameborder="0" allowfullscreen=""></iframe></div> 
       </div> 
      </article> 
      <article> 
       <a href="#superstore" class="image"><img src="images/pic04.jpg" alt="" /></a> 
       <h3 class="major">A</h3> 
       <p>B</p> 
       <a href="#superstore" class="special">Watch me</a> 
       <a href="#_" class="lightbox" id="superstore"> 
       <div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;"> 
        <div class="modal-header"><h3></h3></div> 
        <div class="modal-body"><iframe width="870" height="489" src="https://player.vimeo.com/video/xxx" frameborder="0" allowfullscreen=""></iframe></div> 
       </div> 
      </article> 
      <article> 
       <a href="#pig" class="image"><img src="images/pic05.jpg" alt="" /></a> 
       <h3 class="major">A</h3> 
       <p>B</p> 
       <a href="#pig" class="special">Watch me</a> 
       <a href="#_" class="lightbox" id="pig"> 
       <div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;"> 
        <div class="modal-header"><h3></h3></div> 
        <div class="modal-body"><iframe width="870" height="489" src="https://player.vimeo.com/video/xxx" frameborder="0" allowfullscreen=""></iframe></div> 
       </div> 
      </article> 
     </section> 
    </div> 
</section> 

---

我如何能隔离每一个因此它不会影响代码的其余部分有什么建议？删除一些代码片段会以不同的方式改变表单，而不具有灯箱显然是一种选择，但我喜欢小功能。

谢谢！

Answer 1

这是因为.lighbox是“固定的”。我会想象很多东西都显示重叠。您应该尝试将灯箱包装在彼此相对定位的容器中。