Question

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

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

我试过了hideOnContentClick: false，但这对我来说似乎没有用。有什么想法吗？

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

希望这有帮助。

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

Answer 8

以上都没有为我工作，所以我只为最新版本的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 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中按顺序显示，因此我不希望用户因意外点击叠加层而丢失进度，但希望在页面的其他地方保留该功能。

使用它来禁用它：

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

<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>

Answer 15

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

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

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

15 个答案: