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

你会想要做这样的事情

<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设为类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选择器，那将会有优先权。）

灯箱内容显示在页面上

2 个答案: