Lightbox Inhalt erscheint auf Seite

Question

Ich versuche, ein paar Leuchtkästen auf einer Website einzurichten und es ist mein erstes Mal mit featherlight arbeiten.

Unter Installation sagt es zu jQuery zu verknüpfen, sowie featherlight.js und featherlight.css

Unter Usage heißt es, dass dieser Link den Inhalt in einer Lightbox öffnen sollte:

<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a> 
<div id="mylightbox">This div will be opened in a lightbox</div> 

Es scheint zu funktionieren, außer die div erscheint auf der Seite noch bevor die Schaltfläche geklickt wird. Ich sehe nichts über das Hinzufügen von manuellem CSS/jQuery, um dies zu überschreiben, aber vielleicht verpasse ich etwas?

ich eine Geige hier aufgenommen habe: https://jsfiddle.net/5p506at0/

Answer 1

Auf der demo page wird auch die Technik verwendet, die Sie verwenden. Der Unterschied besteht darin, dass sie geben ihre Leuchtkasten die Klasse lightbox div und setzen dann diese Klasse zu display: none so Ihr Code würde wie folgt aussehen:

.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>

Erläuterung:display: none noch tatsächlich auf der angezeigte Leuchtkasten (überprüfen Sie mit dev tools). Es hat nur keine Priorität (was es hätte, wenn Sie ID-Selektoren in Ihrem CSS verwendet hätten).

Answer 2

Sie wollen werden so etwas wie diese

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

dann die Leuchtkästen div Anzeige genau das tun: keines in Ihrem css

#lightboxes{ 
    display: none; 
} 

Das Plugin zieht grundsätzlich das von Ihnen angegebene div und dupliziert es für einen Leuchtkasten, so lange Sie nicht verbergen, was Sie selbst klonen, sollten Sie keine Probleme haben, auch wenn Der Wrapper ist versteckt.