javascript jquery fancybox-防止关闭fancybox外部的单击

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

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

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

• 它在您提供的该网站链接上有效，您有任何代码吗？
• 是的，但是在所有示例中，如果您在模态窗口之外单击，它将关闭。 我希望它保持打开状态，除非用户单击X(否则没有其他地方)。

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

• 这实际上并不能回答使用fancybox v1.2.1的原始问题。对于介于v1.2.6和v1.3.4之间的版本，请参见@cool_devs答案。对于fancybox 2.x，请参见stackoverflow.com/a/8404587/1055987

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

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

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

• 非常感谢！使用fancybox 1.3.4工作

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

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

希望这可以帮助。

• 这实际上并不能回答使用fancybox v1.2.1的原始问题。对于介于v1.2.6和v1.3.4之间的版本，请参见@cool_devs答案。对于fancybox 2.x，请参见stackoverflow.com/a/8404587/1055987
• @JKF：谢谢，我会提高我的知识

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

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

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

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

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

• 优秀的。我注释掉了这一行并添加了：$("＃fancy_close).bind(" click"，$ .fn.fancybox.close);这正是我所需要的，谢谢！
• 如下面的cool_dev回答中所示，有一个选项，编辑代码会导致问题，需要更新时，您的更改将被覆盖
• 您是如何读取文件的。有一种转换最小Js的方法吗？

以上都不适合我，所以我只是为fancybox的最新版本写了一些简单的文章。

function load(parameters) {
    $('.fancybox-outer').after('');
}

$(document).ready(function () {
    $(".various").fancybox({ 
        modal: true,
        afterLoad: load
    });
});

希望这可以帮助 ：)

我遇到了同样的"问题"。这对我有用： (短码网-duanma.net)

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

• 对于版本2.1.4，他们可以将其更改为$("。fancybox-overlay")。unbind();

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

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

    return false;
});

• 请不要大声喊叫，尤其不要以粗体显示:-)

@Gabriel为此问题提供的$("#fancybox-overlay").unbind()解决方案可以正常工作，只是我需要在加载内容后将其绑定到fancybox，并且无法立即取消绑定。对于遇到此问题的任何人，以下代码为我解决了该问题：

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

400ms的延迟使它为我工作。它的工作时间为300毫秒，但我不想冒险。

您可以通过应用以下设置来阻止花式框关闭

 '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

只需将以下行添加到函数中，就不必在jquery.fancybox-1.2.6.js中进行任何更改

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

• 我们只希望在我们的一个高级包装盒上执行此操作，因此更改源不是一个选择，谢谢！
• 刚刚发现这不适用于Google Chrome，还没有找到原因。

只需使用以下代码：

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

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

我必须将以上所有答案结合使用，因为它们都包含错误。当然，不需要编辑源代码。

就我而言，我想禁用重叠式点击关闭框，因为我有一系列问题会按顺序显示在fancybox中，所以我不希望用户因不小心点击重叠式广告而失去进度，但我想将该功能保留在页面上的其他位置。

使用它禁用它：

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

使用它重新启用它：

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

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

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

以上就是短码网小编为大家整理的《javascript jquery fancybox-防止关闭fancybox外部的单击》相关内容，希望大家喜欢。