Question

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

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

Answer 1

很遗憾，一旦打开，您就无法更改当前fancybox的closeClick行为;您只能评估beforeLoad或afterLoad回调中的条件，并使用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("<span id='temp' style='display:block' />");
                $("#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

如何动态更改FancyBox 2选项？

1 个答案: