fancyboxのコンテンツが隠されていません

Question

私はインラインFancyboxを初めて使用しています。何らかの理由でFancyboxのコンテンツを表示/非表示できません。

これは私のコードです：

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を開き、コンテンツをdispalys。
問題は、Fancyboxリンクをクリックする前にコンテンツがページ上に隠されていないことです。

私はCSSを変更する場合：

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

これは、メインページからコンテンツを隠しますが、それはまたFancyboxポップアップのコンテンツを隠します。

私はここで何が欠けていますか？ Fancyboxは、リンクのhrefと一致するIDを持つ要素を取得します

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

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

、その要素を非表示にすることができないので、それが内部に包まれている必要がありますので、同様にあなたはおそらく、それをラップする必要が

Answer 1

代わりに隠されている別の要素。

コンテンツは、ボタンやものが含まれている場合は、falseに設定すると、hideOnContentClickも良い考えです：

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