灯箱内容出现在页面

Question

我想在网站上设置一些灯箱，这是我第一次使用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/

Answer 1

在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选择器，它会有这个优先级）。

Answer 2

你会想要做这样的事情

<div id="lightboxes"> 
    <div id="mylightbox">This div will be opened in a lightbox</div> 
</div> 

然后，只需设置的灯箱div来显示：无在你的CSS

#lightboxes{ 
    display: none; 
} 

该插件基本上拉动你指定的div，并复制它为一个灯箱，所以只要你没有隐藏自己克隆自己，你应该没有任何问题，即使它的包装是隐藏的。