燈箱內容出現在頁面

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，並複製它爲一個燈箱，所以只要你沒有隱藏自己克隆自己，你應該沒有任何問題，即使它的包裝是隱藏的。