如何即时更改FancyBox 2选项? [英] How to change FancyBox 2 options on the fly?

问题描述

我有一个FancyBox 2.1.5，它使用的是叠加层"closeClick:true"，这意味着当在任意位置单击叠加层时，FancyBox将关闭.我正在以各种方式动态地更新FancyBox内容，并希望能够在特定情况下将overlay closeClick行为更改为"false".

I have a FancyBox 2.1.5 and it's using overlay "closeClick: true", meaning that FancyBox will close when the overlay is clicked anywhere. I'm updating the FancyBox content dynamically in various ways and would like to be able to change the overlay closeClick behaviour to "false" in a certain scenario.

是否可以通过这种方式动态更新FancyBox选项?这种行为上的变化与任何就绪事件/回调都不相关，而是由用户启动的.

Is there a way to update FancyBox options dynamically in this way? This change in behavior would not be relatable to any of the ready events/callbacks but would be user-initiated.

推荐答案

不幸的是，一旦打开了当前的花式盒子，您将无法更改它的closeClick行为.您只能评估beforeLoad或afterLoad回调中的条件，并使用jQuery.extend()更改API选项.

Unfortunately you cannot change the closeClick behavior of the current fancybox once it has been opened; you could only evaluate a condition within the beforeLoad or afterLoad callbacks and change the API options using jQuery.extend() though.

但是，作为一种解决方法，您可以模拟API设置并在叠加层上捕获click事件，以决定是否关闭fancybox以便用户启动更改，因此

However, as a workaround, you could simulate the API settings and catch click events on the overlay to decide whether to close fancybox or not for user-initiated changes so

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

See JSFIDDLE

这篇关于如何即时更改FancyBox 2选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！