添加灯箱废墟 CSS

Question

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

我正在使用以下代码：https://codepen.io/DonnaG/pen/pgHtz

我有 7 个灯箱，添加前两个没问题，但是当我添加第三个时，它破坏了剩余 4 个的 css。

这种形式的灯箱基本上有3个：

<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 是“固定的”。我想很多东西都是重叠显示的。您应该尝试将灯箱包装在彼此相对定位的容器中。

添加灯箱废墟 CSS

Adding a lightbox ruins CSS

html

css

lightbox