如何动态更改FancyBox 2选项?

我有一个FancyBox 2.1.5,它使用覆盖“closeClick:true”,这意味着FancyBox将在任何地方点击叠加时关闭。 我正在以各种方式动态更新FancyBox内容,并希望能够在某种情况下将覆盖closeClick行为更改为“false”。

有没有办法以这种方式动态更新FancyBox选项? 这种行为的改变不会与任何就绪事件/回调相关,而是由用户启动的。

遗憾的是,一旦打开,您就无法更改当前fancybox的closeClick行为。 您只能评估beforeLoadafterLoad回调中的条件,并使用jQuery.extend()更改API选项。

但是,作为一种变通方法,您可以模拟API设置并捕获叠加层上的click事件,以决定是否关闭fancybox以进行用户启动的更改,以便

 var _closeClick = true; // to simulate overlay closeClick default settings jQuery(document).ready(function ($) { $(".fancybox").fancybox({ // it's important ro revert default settings so we can catch click events helpers: { overlay: { closeClick: false // default is true } }, afterLoad: function () { // simulate _closeClick default value _closeClick = true; }, // once fancybox is opened, listen for user-initiated changes afterShow: function () { // button that simulates user-initiated event // toggle overlay closeClick on/off on button click $("#closeclick").on("click", function (e) { _closeClick = _closeClick ? false : true; // log changes (debugging) var _html = "set overlay closeClick to " + (_closeClick ? false : true) + ""; $(this).html(_html); $("#inline").append(""); $("#temp").html("Current overlay closeClick = " + _closeClick); // avoid further click propagation from parent (the overlay perhaps) e.stopPropagation(); }); // bind a click event to overlay $(".fancybox-overlay").on("click", function () { // if flag is set to true, close fancybox if (_closeClick) { $.fancybox.close(); }; }); $(".fancybox-wrap").on("click", function (event) { // stopPropagation on children coming from overlay, including #closeclick event.stopPropagation(); }); }, beforeClose: function () { // restore settings $("#temp").remove(); $(".fancybox-overlay, .fancybox-wrap").unbind("click"); } }); }); // ready 

请参阅JSFIDDLE