Jquery fancybox – éviter de fermer sur un clic en dehors de fancybox

J'utilise le plugin Fancybox pour mes fenêtres modales. Il semble que peu importe les options que j'utilise, je ne peux pas empêcher la fermeture de la fenêtre modale de fancybox lorsque l'utilisateur clique en dehors de la fenêtre modal de fancybox (zone grisée).

Existe-t-il un moyen de forcer l'utilisateur à cliquer sur le X ou sur un bouton sur lequel je déclenche l'événement de fermeture? Cela semble être simple, donc j'espère simplement que je lis simplement les exemples.

J'ai essayé hideOnContentClick: false mais cela ne semble pas fonctionner pour moi. Des idées?

Il n'y a pas d'option pour cela. Vous devrez modifier le code source.

Dans jquery.fancybox-1.2.1.js, vous devez faire un commentaire (ou supprimer) la ligne 341 dans la méthode _finish:

 //$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close); 
  jQuery(".lightbox").fancybox({ helpers : { overlay : { speedIn : 0, speedOut : 300, opacity : 0.8, css : { cursor : 'default' }, closeClick: false } }, }); 
 <script type="text/javascript"> $(document).ready(function() { $("#your_link").fancybox({ 'hideOnOverlayClick':false, 'hideOnContentClick':false }); }); </script> 

J'utilise fancybox 1.3.1, si vous voulez obliger l'utilisateur à fermer la boîte modale SEULEMENT en cliquant sur le bouton, vous pouvez spécifier dans la configuration:

 <script type="text/javascript"> $(document).ready(function() { $("#your_link").fancybox({ 'hideOnOverlayClick':false, 'hideOnContentClick':false }); }); </script> 

Pour ce problème, essayez de cette façon

 $("YourElement").fancybox({ helpers: { overlay: { closeClick: false } //Disable click outside event } 

J'espère que cela t'aides.

Si vous utilisez Fancybox 1.2.6 (comme je l'ai fait sur un projet), j'ai découvert l'option hideOnOverlayClick. Vous pouvez le configurer sur false (par exemple, hideOnOverlayClick: false).

J'ai trouvé cette option en explorant pour modifier le code en fonction de la suggestion donnée par Scott Dowding.

J'ai rencontré le même "problème". Cela a fonctionné pour moi:

 $("#fancybox-overlay").unbind(); 

Aucun des éléments ci-dessus n'a fonctionné pour moi, alors j'ai juste écrit un petit peu pour la dernière version de fancybox.

 function load(parameters) { $('.fancybox-outer').after('<a href="javascript:;" onclick="javascript:{parent.$.fancybox.close();}" class="fancybox-item fancybox-close" title="Close"></a>'); } $(document).ready(function () { $(".various").fancybox({ modal: true, afterLoad: load }); }); 

J'espère que cela t'aides 🙂

La solution $("#fancybox-overlay").unbind() donnée pour cette question par @Gabriel fonctionne sauf que je devais l'lier à la fancybox après qu'elle a chargé son contenu, et je ne pouvais pas me séparer immédiatement. Pour quiconque se heurte à ce problème, le code suivant a résolu le problème pour moi:

 $('.fancybox').fancybox({'afterLoad' : function() { setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);} }); 

Le délai de 400 ms l'a fait fonctionner. Cela a fonctionné avec 300 ms mais je ne voulais pas prendre de risques.

Réglez le paramètre closeClick sur false dans votre fonction:

 $(".video").click(function() { $.fancybox({ width: 640, height: 385, helpers: { overlay: { closeClick: false } } }); return false; }); 

Ajoutez simplement la ligne suivante à votre fonction, vous ne devez rien changer dans jquery.fancybox-1.2.6.js

 callbackOnStart : function() {$("#fancy_overlay").bind("click","null");}, 

Vous pouvez empêcher la boîte de fantaisie de se fermer en appliquant ces paramètres

  'showCloseButton'=>false, // hide close button from fancybox 'hideOnOverlayClick'=>false, // outside of fancybox click disabled 'enableEscapeButton'=>false, // disable close on escape key press 

Obtenir le paramètre fancybox à partir du lien suivant

http://www.fancybox.net/api

Je devais utiliser une combinaison de toutes les réponses ci-dessus, car toutes incluent des erreurs. Certes, aucune édition du code source n'est nécessaire.

Dans mon cas, je voulais désactiver les clics de superposition en fermant la boîte car j'avais une progression de questions qui seraient affichées séquentiellement dans la fancybox, donc je ne voulais pas que les utilisateurs perdent leurs progrès en cliquant accidentellement sur la superposition, mais voulaient Gardez cette fonctionnalité ailleurs sur la page.

Utilisez ceci pour le désactiver:

 $(".fancybox-overlay").unbind(); 

Utilisez ceci pour le réactiver:

 $(".fancybox-overlay").bind("click", $.fancybox.close); 

Utilisez simplement le code suivant:

 $(document).ready(function() { $("a#Mypopup").fancybox({ "hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox "hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox "enableEscapeButton" : false // prevents closing pressing ESCAPE key }); $("a#Mypopup").trigger('click'); }); <a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a> 

Vous pouvez configurer la fermeture par défaut sur la superposition sur false. A travaillé pour moi dans la version 2.1.5.

 $.fancybox.helpers.overlay.defaults.closeClick=false;