[英]jquery fancybox - prevent close on click outside of fancybox
我正在为我的模态窗口使用Fancybox插件。 似乎无论我使用什么选项,当用户点击fancybox模态窗口(灰色区域)外,我无法阻止fancybox模态窗口关闭。
有没有办法强制用户单击我触发关闭事件的X或按钮? 这似乎应该很简单,所以我希望我只是读错了这些例子。
我试过hideOnContentClick: false
但这对我来说似乎没有用。 有任何想法吗?
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>
我正在使用fancybox 1.3.1,如果您想通过单击按钮强制用户关闭模式框,您可以在配置中指定:
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
对于这个问题,请尝试这种方式
$("YourElement").fancybox({
helpers: {
overlay: { closeClick: false } //Disable click outside event
}
希望这可以帮助。
如果您使用的是Fancybox 1.2.6(就像我在项目中一样),我找到了hideOnOverlayClick选项。 您可以将其设置为false(例如hideOnOverlayClick:false)。
我在探索修改代码的过程中找到了这个选项,基于Scott Dowding的建议。
没有选择。 您将不得不更改源代码。
在jquery.fancybox-1.2.1.js中,您需要在_finish方法中注释掉(或删除)第341行:
//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);
我遇到了同样的“问题”。 这对我有用:
$("#fancybox-overlay").unbind();
以上都没有为我工作,所以我只为最新版本的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
});
});
希望这可以帮助 :)
@Gabriel为这个问题提供的$("#fancybox-overlay").unbind()
解决方案是有效的,除了我需要在加载其内容后将其绑定到fancybox,我无法立即取消绑定。 对于遇到此问题的任何人,以下代码为我解决了问题:
$('.fancybox').fancybox({'afterLoad' : function() {
setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});
400毫秒的延迟使它为我工作。 它的工作时间为300毫秒,但我不想冒险。
在函数内将closeClick
参数设置为false :
$(".video").click(function() {
$.fancybox({
width: 640,
height: 385,
helpers: {
overlay: {
closeClick: false
}
}
});
return false;
});
只需在您的函数中添加以下行,您就不必在jquery.fancybox-1.2.6.js中更改任何内容
callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},
您可以通过应用这些设置来阻止关闭花式框
'showCloseButton'=>false, // hide close button from fancybox
'hideOnOverlayClick'=>false, // outside of fancybox click disabled
'enableEscapeButton'=>false, // disable close on escape key press
从以下链接获取fancybox设置
我不得不使用上述所有答案的组合,因为它们都包含错误。 当然,不需要编辑源代码。
在我的情况下,我想禁用重叠点击关闭框,因为我有一系列问题会在fancybox中按顺序显示,所以我不希望用户因意外点击叠加而失去进度,但是想要将该功能保留在页面的其他位置。
使用它来禁用它:
$(".fancybox-overlay").unbind();
使用它来重新启用它:
$(".fancybox-overlay").bind("click", $.fancybox.close);
只需使用以下代码:
$(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>
您可以将叠加层上的默认closeClick设置为false。 在2.1.5版本中为我工作过。
$.fancybox.helpers.overlay.defaults.closeClick=false;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.