灯箱内容出现在页面
问题描述:
我想在网站上设置一些灯箱,这是我第一次使用featherlight。灯箱内容出现在页面
在Installation它说链接到jQuery的,以及featherlight.js和featherlight.css
在Usage它说,这个环节应该打开的收藏夹内容:
<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>
<div id="mylightbox">This div will be opened in a lightbox</div>
它似乎工作,除了div
甚至在按钮被点击之前出现在页面上。我没有看到任何关于添加手动CSS/jQuery来覆盖这个,但也许我错过了什么?
我这里包括小提琴:https://jsfiddle.net/5p506at0/
答
在demo page上也使用了您正在使用的技巧。不同的是,他们给自己收藏的div类lightbox
,然后将该类设置为display: none
所以你的代码应该是这样的:
.lightbox {
display: none;
}
<link href="https://cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.js"></script>
<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>
<div id="mylightbox" class="lightbox">This div will be opened in a lightbox</div>
说明:display: none
仍实际存在的显示的灯箱(使用开发工具进行检查)。它只是没有优先级(如果你在你的css中使用id选择器,它会有这个优先级)。
答
你会想要做这样的事情
<div id="lightboxes">
<div id="mylightbox">This div will be opened in a lightbox</div>
</div>
然后,只需设置的灯箱div来显示:无在你的CSS
#lightboxes{
display: none;
}
该插件基本上拉动你指定的div,并复制它为一个灯箱,所以只要你没有隐藏自己克隆自己,你应该没有任何问题,即使它的包装是隐藏的。
我喜欢这个解决方案。不错,简单,不需要容器。谢谢! –
没问题的人。 – jcuenod