【发布时间】：2016-04-22 18:32:48
【问题描述】：
我正在使用 Skeleton CSS Boilerplate 构建我的网站，并且在网格内我想使用免费的灯箱“HTML5 LightBox”。但是，当我单击任何灯箱时，它似乎被我的第一个灯箱/div 否决了。
这让我很头疼，因为我或多或少是 HTML 的初学者，所以我不知道代码中的错误可能出在哪里。
图像显示正确，并且 p class="imgtext" 也显示正确，但是，当我单击第二张图像时，我得到了网站 1 的灯箱。
这是前两列的 sn-p，里面有它们对应的灯箱：
<div class="container main">
<div class="row">
<div class="four columns portfolio">
<div id="mydiv" style="display:none;">
<div class="lightboxcontainer">
<div class="lightboxleft">
<div class="divtext">
<p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 1</p>
<p class="divdescription" style="font-size:14px;line-height:20px;">xxxWonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
</div>
</div>
<div class="lightboxright">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
</div>
<div style="clear:both;"></div>
</div>
</div>
<a href="#mydiv" class="html5lightbox" data-width="800" data-height="400" >
<div href="#mydiv" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
<a href="#">
<img class="grid" src="images/rven.jpg" />
<p class="imgtext">
<span>
<span>Website 1</span>
</span>
</p>
</a>
</div>
</a>
</div><!-- End of element-->
<div class="four columns portfolio">
<div id="mydiv" style="display:none;">
<div class="lightboxcontainer">
<div class="lightboxleft">
<div class="divtext">
<p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 2</p>
<p class="divdescription" style="font-size:14px;line-height:20px;">WonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
</div>
</div>
<div class="lightboxright">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
</div>
<div style="clear:both;"></div>
</div>
</div>
<a href="#mydiv" class="html5lightbox" data-width="800" data-height="400" >
<div href="#mydiv" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
<a href="#">
<img src="images/sortelunger.jpg" />
<p class="imgtext">
<span>
<span>Website 2</span>
</span>
</p>
</a>
</div>
</a>
</div><!-- End of element-->
</div>
如果有人有任何想法，或者可以为我指出正确的方向，我将不胜感激。
亲切的问候。
【问题讨论】：
-
一旦我在 modal:z-index:1151 !important;它按要求工作
-
抱歉，我在站点中查看代码大约 15 分钟，突然想到我在整个文档中一直在引用同一个 div id。不过感谢您的回答，我相信它也会起作用的！
标签： javascript jquery css html