jquery fancybox – 防止在fancybox外面点击关闭

我正在为我的模态窗口使用Fancybox插件。 似乎无论我使用什么选项，当用户点击fancybox模态窗口（灰色区域）外，我无法阻止fancybox模态窗口关闭。

有没有办法强制用户单击我触发关闭事件的X或按钮？ 这似乎应该很简单所以我希望我只是读错了这些例子。

我试过hideOnContentClick: false但这对我来说似乎没有用。 有任何想法吗？

Answer 1

没有选择。 您将不得不更改源代码。

在jquery.fancybox-1.2.1.js中，您需要在_finish方法中注释掉（或删除）第341行：

 //$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close); 

Answer 2

  jQuery(".lightbox").fancybox({ helpers : { overlay : { speedIn : 0, speedOut : 300, opacity : 0.8, css : { cursor : 'default' }, closeClick: false } }, }); 

Answer 3

Answer 4

我正在使用fancybox 1.3.1，如果您想通过单击按钮强制用户关闭模式框，您可以在配置中指定：

Answer 5

对于这个问题，请尝试这种方式

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

希望这可以帮助。

Answer 6

如果你正在使用Fancybox 1.2.6（就像我在一个项目中），我发现了hideOnOverlayClick选项。 您可以将其设置为false（例如hideOnOverlayClick：false）。

我在探索修改代码的过程中找到了这个选项，基于Scott Dowding的建议。

Answer 7

我遇到了同样的“问题”。 这对我有用：

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

Answer 8

以上都没有为我工作，所以我只为最新版本的fancybox写了一个简单的位。

 function load(parameters) { $('.fancybox-outer').after(''); } $(document).ready(function () { $(".various").fancybox({ modal: true, afterLoad: load }); }); 

希望这可以帮助 ：）

Answer 9

@Gabriel为这个问题提供的$("#fancybox-overlay").unbind()解决方案是有效的，除了我需要在加载其内容后将其绑定到fancybox，我无法立即取消绑定。 对于遇到此问题的任何人，以下代码为我解决了问题：

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

400毫秒的延迟使它为我工作。 它工作了300毫秒，但我不想冒险。

Answer 10

在函数内将closeClick参数设置为false ：

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

Answer 11

只需在您的函数中添加以下行，您就不必在jquery.fancybox-1.2.6.js中更改任何内容

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

Answer 12

您可以通过应用这些设置来阻止关闭花式框

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

从以下链接获取fancybox设置

http://www.fancybox.net/api

Answer 13

我不得不使用上述所有答案的组合，因为它们都包含错误。 当然，不需要编辑源代码。

在我的情况下，我希望禁用关闭框的重叠点击，因为我有一系列问题会在fancybox中按顺序显示，所以我不希望用户因意外点击叠加而失去进度，但是想要将该function保留在页面的其他位置。

用它来禁用它：

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

使用它来重新启用它：

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

Answer 14

只需使用以下代码：

 $(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'); });  

Answer 15

您可以将叠加层上的默认closeClick设置为false。 在2.1.5版本中为我工作过。

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