12

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

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

我已经尝试过hideOnContentClick: false，但这似乎对我不起作用。有任何想法吗？

4

15 回答 15

23 
   jQuery(".lightbox").fancybox({
        helpers     : {
            overlay : {
                speedIn  : 0,
                speedOut : 300,
                opacity  : 0.8,
                css      : {
                    cursor : 'default'
                },
                closeClick: false
            }
        },
    });
于 2012-05-28T13:12:56.177 回答
11 
<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>
于 2011-06-17T10:32:05.397 回答
7

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

<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>
于 2010-06-16T13:26:20.253 回答
6

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

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

希望这可以帮助。

于 2014-10-22T06:37:10.807 回答
5

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

我在探索根据 Scott Dowding 给出的建议修改代码时发现了这个选项。

于 2012-11-08T09:23:17.237 回答
4

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

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

//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);
于 2009-09-01T18:42:07.030 回答
3

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

$("#fancybox-overlay").unbind();
于 2012-04-06T10:51:14.790 回答
3

以上都不适合我，所以我只是为最新版本的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
    });
});

希望这可以帮助 ：）

于 2012-09-13T19:50:44.427 回答
2

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

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

400 毫秒的延迟让它对我有用。它的工作时间为 300 毫秒，但我不想冒险。

于 2012-09-20T23:48:47.197 回答
2

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

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

    return false;
});
于 2013-11-05T23:20:20.503 回答
1

只需将以下行添加到您的函数中，您无需更改 jquery.fancybox-1.2.6.js 中的任何内容

callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},
于 2009-12-22T16:24:35.740 回答
1

您可以通过应用这些设置来防止花哨的盒子关闭

 '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

于 2014-01-15T13:17:15.767 回答
0

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

就我而言，我想禁用关闭框的覆盖点击，因为我有一系列问题将在幻想框内按顺序显示，所以我不希望用户因意外点击覆盖而失去进度，但想要将该功能保留在页面的其他位置。

使用它来禁用它：

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

使用它来重新启用它：

$(".fancybox-overlay").bind("click", $.fancybox.close);
于 2013-04-02T21:48:12.657 回答
0

只需使用以下代码：

$(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>
于 2013-10-16T07:29:19.900 回答
-1

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

$.fancybox.helpers.overlay.defaults.closeClick=false;
于 2014-11-17T16:51:44.843 回答