ライトボックスの内容はページに表示されます

Question

ウェブサイトにライトボックスをいくつか設定しようとしていますが、初めてfeatherlightを使用しています。 Installationの下

それがこのリンクをライトボックスにコンテンツを開くべきであると述べているjQueryのにリンクすると言うだけでなく、featherlight.jsとUsageの下

をfeatherlight.css：

<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では、使用している技術も使用されます。

.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が実際に存在し、まだある違いは、クラスlightbox DIV彼らのライトボックスを提供し、そのようにあなたのコードは次のようになりますdisplay: noneにそのクラスを設定することです表示されたライトボックス（devツールで確認）それは優先順位を持っていません（あなたのCSSでidセレクタを使用した場合にはこれがあります）。

Answer 2

あなたがそれからちょうどライトボックス表示にdivの設定この

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

ような何かをしたいと思う：私はここにフィドル含めました

あなたのCSSのどれを

#lightboxes{ 
    display: none; 
} 

プラグインは基本的に指定したdivを取り出し、ライトボックス用に複製します。クローンしているものを隠していない限り、問題はないはずです。そのラッパーは隠されています。