灯箱内容出现在页面上

Question

我正在尝试在网站上设置几个灯箱，这是我第一次使用 featherlight。

在Installation下它说到link到jQuery，以及featherlight.js和featherlight.css

在 Usage 下它说这个 link 应该在灯箱中打开内容：

<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 来覆盖它的信息，但也许我遗漏了什么？

我在这里添加了一个 fiddle：https://jsfiddle.net/5p506at0/

Answer 1

你会想做这样的事情

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

然后只需将 css

中的灯箱 div 设置为 display:none

#lightboxes{
  display: none;
}

该插件基本上提取您指定的 div 并将其复制到灯箱中，因此只要您不隐藏您正在克隆的内容，您就不会有任何问题，即使它包装器已隐藏。

Answer 2

在demo page上也使用了您正在使用的技术。不同之处在于他们将灯箱 div 设置为 class lightbox 然后将 class 设置为 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 选择器，它就会有优先级）。

灯箱内容出现在页面上

Lightbox content appears on page

css

jquery

featherlight.js