라이트 박스의 내용은 내가 웹 사이트에 몇 박스를 설정려고하고 <a href="http://noelboss.github.io/featherlight/" rel="nofollow">featherlight</a> 작업 내 처음 페이지

Question

에 나타납니다.

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

그것을 : 그것은이 링크가 라이트 박스의 내용을 열도록 말한다 featherlight.js뿐만 아니라, jQuery를에 연결하고 Usage에서

을 featherlight.css 말한다 Installation에서

버튼을 클릭하기도 전에 페이지의 div 나타납니다 제외하고 작동하는 것 같다. 수동 CSS/jQuery를 추가하여이 문제를 해결할 수있는 방법은 없지만 뭔가 누락 된 것일까 요? https://jsfiddle.net/5p506at0/이

Answer 1

.

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

당신은 어떤 문제가 안 당신이 자신을 복제하고 숨어되지 않는 한

플러그인은 기본적으로해도 너무 한, 사용자가 지정하는 사업부를 끌어와 라이트 박스를 위해 중복 래퍼가 숨겨져 있습니다. demo page 당신은 또한 사용되는 사용하는 기술에