jquery fancybox -防止在fancybox外单击关闭

I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).

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

Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.

是否有办法迫使用户单击我触发关闭事件的X或按钮?这看起来应该很简单，所以我希望我只是读错了例子。

I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?

我试过hideOnContentClick: false，但似乎对我不起作用。什么好主意吗?

15 个解决方案

#1

There is no option for that. You will have to change the source code.

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

In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:

在jquery.fancybox-1.2.1。需要在_finish方法中注释(或删除)行341:

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

#2

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

#3

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

#4

I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:

我使用的是fancybox 1.3.1，如果你想让用户只能通过点击按钮来关闭模式框，你可以在配置中指定:

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

#5

For this issue, please try this way

对于这个问题，请尝试一下

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

Hope this helps.

希望这个有帮助。

#6

If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).

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

I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.

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

#7

I ran into the same "issue". This worked for me:

我遇到了同样的“问题”。这工作对我来说:

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

#8

none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.

以上方法对我都不起作用，所以我只为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
    });
});

Hope this helps :)

希望这有助于:)

#9

The $("#fancybox-overlay").unbind() solution given for this question by @Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:

@Gabriel为这个问题提供了$(“#fancybox-overlay”).unbind()解决方案，但我需要在fancybox加载内容后将其绑定到fancybox，我无法立即解绑定。对于任何遇到这个问题的人，下面的代码为我解决了这个问题:

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

The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.

400毫秒的延迟让它对我起作用。它在300毫秒时起作用，但我不想冒险。

#10

Set the closeClick parameter to false inside your function:

将closeClick参数设置为false:

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

    return false;
});

#11

Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js

只需在函数中添加以下行，就不需要更改jquery.fancybox 1.2.6.js中的任何内容

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

#12

you can prevent the fancy box to close by applying these setting

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

 'showCloseButton'=>false, // hide close button from fancybox
 'hideOnOverlayClick'=>false, // outside of fancybox click disabled
 'enableEscapeButton'=>false, // disable close on escape key press

get the fancybox setting from following link

从以下链接获取fancybox设置

http://www.fancybox.net/api

#13

I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.

我必须结合上面所有的答案，因为所有的答案都包含错误。当然，不需要编辑源代码。

In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.

在我的例子中,我想禁用覆盖点击关闭盒子我有进展的问题将按顺序显示在fancybox,所以我不想让用户失去进步的不小心点击叠加,但希望保持功能页面上的其他地方。

Use this to disable it:

用这个来禁用它:

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

Use this to re-enable it:

用这个重新启用它:

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

#14

Just use the following code:

只需使用以下代码:

$(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>

#15

-1

You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.

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

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

#1