Le contenu de fancybox n'est pas caché

Question

J'utilise en ligne Fancybox pour la première fois et pour une raison que je ne suis pas en mesure d'afficher/cacher le contenu dans le Fancybox.

Ceci est mon code:

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

Le code ci-dessus ouvre la Fancybox correctement et dispalys le contenu.
Le problème est que le contenu n'est pas masqué sur la page avant de cliquer sur le lien Fancybox.

Si je modifie le code CSS:

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

Ce cache le contenu de la page principale, mais elle cache aussi le contenu dans le menu contextuel Fancybox.

Qu'est-ce qui me manque ici?

Answer 1

Vous avez probablement besoin de l'envelopper, comme ceci:

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

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

Fancybox va chercher l'élément avec un ID qui correspond à la href du lien, cet élément ne peut pas être caché, donc il doit être enroulé à l'intérieur un autre élément qui est caché à la place.

Si le contenu contient des boutons et des choses, la mise en hideOnContentClick false est aussi une bonne idée:

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