jQuery Fancybox 2.0.3 - 防止在 FancyBox 外部单击时关闭

Question

我正在使用jQuery Fancybox 2.0.3版本。我想要防止在Fancybox外部点击来关闭它。我希望强制用户点击叉号按钮才能关闭。我已经尝试过:

$(document).ready(function() {
    $(".various").fancybox({
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        hideOnOverlayClick:false,
        hideOnContentClick:false
    }).trigger("click");
});

但是在新版本的fancybox中，这似乎不起作用。我已经参考了这个链接：jquery fancybox - prevent close on click outside of fancybox，但这些解决方案在fancybox 2.0.3中似乎不起作用。

- user930026

Answer 1

使用此选项：

helpers : { 
  overlay : {closeClick: false}
}

那么你最终的脚本应该是这样的：

$(document).ready(function() {
 $(".various").fancybox({
  closeClick  : false, // prevents closing when clicking INSIDE fancybox 
  openEffect  : 'none',
  closeEffect : 'none',
  helpers   : { 
   overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
  }
 }).trigger("click");
});

hideOnOverlayClick和hideOnContentClick是Fancybox v1.3.x的选项。

- JFK

---

脚本运行良好，除了它在文档准备就绪时显示fancybox，而不是在我点击相关按钮后。有什么想法可以防止这种情况发生吗？ - Pejs

@Pejs 如果您不想在页面加载后立即运行脚本，则从上面的代码中删除 .trigger("click")。 - JFK

如果您正在使用Fancybox 3，请将clickSlide: false添加到您的选项数组中。 - Ryan Burney

fancybox 3.3.1只需要添加"clickSlide: false"就可以防止在侧边点击时关闭，正如Ryan Burney所提到的那样。 - needfulthing

Answer 2

这个问题询问的是 fancyBox 2.0，但如果你正在使用 fancyBox 3.0+ 并在这里寻找答案，可以直接执行以下操作：

$('.various').fancybox({
    clickSlide: false, // disable close on outside click
    touch: false // disable close on swipe
});

您还可以通过将options数组中的smallBtn和toolbar都设置为false来完全禁用关闭按钮。

已测试通过fancyBox 3.5.7。

- Ryan Burney

Answer 3

$('.refer').fancybox({'width':395,'height':135,'type':'iframe',title:{type:'outside'},'closeBtn':false,helpers:{overlay:{closeClick:false} }})在此输入链接描述

- subash pandey

Answer 4

使用Vennik的解决方案 - jsfiddle.net/5EV8r/425。

如果你想防止点击外部区域。

例如使用：

$(".fancybox_pdf").fancybox({
      helpers : { 
      overlay : {closeClick: false}
      },
      autoSize: false,

        afterShow: function() {
            $(".fancybox-close").click(function(e) {
                e.preventDefault();
                last.click();
            });
        }
    });

- Tom Sawin

Answer 5

$(document).ready(function() {
    $("#popup").fancybox({
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        helpers   : { 
            overlay : {
                closeClick: false,
            }
        }
    }).trigger("click");
});

- Deepak Thakare

---

嗨，Deepak，感谢您在stackoverflow上的第一个答案。如果可能的话，请解释一下为什么答案有效，以帮助社区学习更多 :)祝编程愉快...Sam（评论员） - saml