jQuery Fancybox - 阻止在 Fancybox 外部点击关闭

Question

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

是否有一种方法可以强制用户单击 X 或由我触发的按钮来关闭事件？这似乎应该很简单，所以我希望我只是看错示例。

我尝试过 hideOnContentClick: false，但它对我不起作用。有什么想法吗？

- Mike

---

它在你提供的那个网站链接上运行良好，你有任何代码吗？ - waqasahmed

没错，但是在所有的例子中，如果你点击模态窗口之外的区域，它就会关闭。我希望它保持打开状态，除非用户点击X（而不是其他任何地方）。 - Mike

Answer 1

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

- user1421770

---

这并没有回答原问题，原问题使用的是fancybox v1.2.1版本。对于v1.2.6和v1.3.4之间的版本，请参考@cool_dev的答案。对于fancybox 2.x，请参见https://dev59.com/-2oy5IYBdhLWcg3wq_wk#8404587。 - JFK

Answer 2

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

- cool_dev

Answer 3

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

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

- justinw

---

非常感谢！使用fancybox 1.3.4已经生效。 - Rafael Merlin

Answer 4

针对这个问题，请尝试这种方法。

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

希望这能帮到你。

- Binh LE

---

这并没有回答原问题，原问题使用的是fancybox v1.2.1版本。对于v1.2.6和v1.3.4之间的版本，请参考@cool_dev的答案。对于fancybox 2.x，请参见https://dev59.com/-2oy5IYBdhLWcg3wq_wk#8404587。 - JFK

@JKF：谢谢，我会提高我的知识水平。 - Binh LE

Answer 5

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

我是通过探索修改代码来自Scott Dowding的建议时发现这个选项的。

- Mudasser Mian

Answer 6

没有这个选项。您需要更改源代码。

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

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

- Scott Dowding

---

太棒了。我将该行注释掉并添加了：$("#fancy_close").bind("click", $.fn.fancybox.close);这正是我所需要的。谢谢！ - Mike

如下cool_dev答案中所述，有一个选项，编辑代码将导致更新时出现问题，您的更改将被覆盖。 - Starjumper Tech SL

你是怎么读取文件的？有一种方法可以将压缩后的JS转换吗？ - Abdennour TOUMI

Answer 7

我遇到了同样的“问题”。这个方法对我有效：

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

- Gabriel

---

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

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
    });
});

希望这能帮到你：)

- Mandeep Singh Bhangu

Answer 9

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

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

400毫秒的延迟对我有用。300毫秒也可以，但我不想冒险。

- atwede

Answer 10

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

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

    return false;
});

- T.Todua

---

请不要大声喊叫，尤其是不要用加粗的方式 :-) - kleopatra