fancybox의 콘텐츠는 내가/보여 <code>Fancybox</code> 내에서 내용을 숨길 수 아니에요 내가 처음으로 어떤 이유 인라인 <a href="http://fancybox.net" rel="nofollow">Fancybox</a>을 사용하고

Question

을 숨겨지지 않습니다.

HTML

<a id="openUserDialogBox" href="#assocUserDialogBox">Click</a> 

<div id="assocUserDialogBox"> 
    My content here 
</div> 

CSS

#assocUserDialogBox { width: 400px; text-align: center; padding: 20px; } 

JS

$('#openUserDialogBox').fancybox({ 
    'showCloseButton' : true, 
    'enableEscapeButton' : true 
}); 

위의 코드가 제대로 Fancybox을 열고 내용을 디스플레이합니다 :

이 내 코드입니다.
Fancybox 링크를 클릭하기 전에 콘텐츠가 페이지에서 숨겨지지 않는 것이 문제입니다.

나는 CSS를 변경하는 경우 :

#assocUserDialogBox { width: 400px; text-align: center; padding: 20px; display: none; } 

이 메인 페이지에서 콘텐츠를 숨 깁니다하지만, 그것은 또한 Fancybox 팝업의 내용을 숨 깁니다.

무엇이 여기에 있습니까?

Answer 1

당신은 아마과 같이, 그것을 포장해야합니다

은 내부에 포장해야하므로

Fancybox 링크의 href를 일치하는 ID를 가진 요소를 가져옵니다는, 그 요소는, 숨길 수 없습니다

<a id="openUserDialogBox" href="#assocUserDialogBox">Click</a> 

<div style="display:none"> 
    <div id="assocUserDialogBox"> 
     My content here 
    </div> 
</div> 

대신 숨겨진 다른 요소.

$('#openUserDialogBox').fancybox({ 
    'hideOnContentClick': false, 
    'showCloseButton' : true, 
    'enableEscapeButton' : true 
});