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

添加灯箱会破坏CSS

1 个答案: