Problème avec Fancybox en mode modal

Question

Compte tenu de ce lien dans le cadre FancyBox:

<a class="fancyBox" href="http://localhost/ccms/index.cfm?do=user.update" id="userLink">Update</a> 

Si je clique sur ce lien physique, la fenêtre modale FancyBox apparaît et affiche le contenu de la page de mise à jour de l'utilisateur. La fenêtre est en mode modal et la seule façon de fermer la fenêtre est via le Close/X. Cliquer à l'extérieur du modal ne fait rien. Jusqu'ici tout va bien.

Cependant, si je tente de déclencher la fenêtre comme ceci:

$("#userLink").fancybox().trigger('click'); 

La page de mise à jour de l'utilisateur apparaît dans un modal au besoin, mais en cliquant en dehors du modal déclenche maintenant l'événement de fermeture et la fenêtre est fermée .

Des idées pour lesquelles cela se passe ???

Finalement ce que je voudrais, c'est que le comportement du modal soit cohérent. Mais si aucune solution ne peut être trouvée pour cela, n'existe-t-il pas un moyen de contourner l'événement click provoquant la fermeture et la désactivation du modal?

Merci, quelqu'un?

Answer 1

Vous devez spécifier le comportement modal lorsque vous appelez fancybox() comme cela. Vous êtes probablement en train d'écraser les paramètres que vous avez fournis dans l'autre sens lorsque vous l'appelez de cette manière. Ainsi, afin de conserver vos paramètres, procédez comme suit:

$("#userLink").fancybox({modal:true}).trigger('click'); 

Mais je vous conseille d'essayer: $("#userLink").click(); qui déclenchera l'événement click et vous devez utiliser vos paramètres existants.

Answer 2

Vous pouvez également utiliser la fancybox api

1. hideOnContentClick: false
2. hideOnOverlayClick: false

Espérons que cela aidera

Answer 3

Il suffit d'ajouter parent: "forme: tout d'abord" à .fancybox ({}); fonction.

exemple:

$(".various").fancybox({ 
       maxWidth: 800, 
       maxHeight: 600, 
       fitToView: false, 
       width: '50%', 
       height: '50%', 
       autoSize: false, 
       closeClick: false, 
       openEffect: 'none', 
       closeEffect: 'none', 
       parent: "form:first" 
      });