jquery fancybox - 防止在fancybox之外点击关闭

Question

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

有没有办法强制用户点击X或我触发关闭事件的按钮？这看起来应该很简单，所以我希望我只是读了错误的例子。我试过hideOnContentClick: false但这似乎不适合我。有任何想法吗？

Answer 1

没有选择。你将不得不改变源代码。

在jquery.fancybox-1.2.1.js你需要注释掉（或删除）线341在_finish方法：

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

Answer 2

以下行添加到您的功能，你不必在jquery.fancybox-1.2.6.js的

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

Answer 3

我使用的fancybox 1.3.1，如果你想强制用户只需通过点击按钮，关闭模式对话框改变什么，你可以在指定配置：

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

Answer 4

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

Answer 5

我遇到了同样的“问题”。这为我工作：

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

Answer 6

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

Answer 7

以上都不是为我工作，所以我就写了的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 
    }); 
}); 

希望这有助于:)

Answer 8

由@Gabriel这个问题给出的解决方案$("#fancybox-overlay").unbind()除了工作，我需要加载的内容后，将其绑定到的fancybox，我不能马上解除绑定。对于谁运行到这个问题的人，下面的代码解决了这个问题对我来说：

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

的400ms的延迟得到它为我工作。它与300ms一起工作，但我不想冒险。

Answer 9

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

我发现这个选项时，根据Scott Dowding提供的建议修改代码。

Answer 10

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

在我的情况下，我想关闭覆盖点击关闭框，因为我有一系列问题可以在fancybox内顺序显示，所以我不希望用户因意外地点击叠加层而失去进度，但希望在页面的其他地方保持该功能。

使用该禁用它：

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

使用此功能重新启用它：

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

Answer 11

只需使用下面的代码：

$(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> 

Answer 12

设置closeClick参数虚假里面你的功能：

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

    return false; 
}); 

Answer 13

可以防止花式盒应用这些设置

'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 14

对于这一问题的设置，请尝试这种方式

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

希望这有助于。

Answer 15

您可以将默认的关闭点击重叠设置为false。在2.1.5版本中为我工作。

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