Question

我每次在$ .post方法

之后在afterLoad事件上调用fancybox 2

$.post ... function(html){
$.fancybox({afterLoad:function(){this.content = html;}});
}

当Fancybox关闭时它工作正常，但当我从已经打开的Fancybox再次发出此请求时，我收到错误“内容无法加载”！

我已经在洛杉矶之前，在展示和其他一些事件之前，但没有运气。我怎样才能使它发挥作用？

Answer 1

难道你不想做这样的事吗？

$.post ... function(html){
    $.fancybox( html );
}

Answer 2

要将新内容加载到已打开的花式框中，您可以执行以下操作。这样，在使用新内容更新fancybox窗口之间，fancybox将不关闭：

// is fancybox already popped up?
fancyboxIsOpen: false,

openFancyBox: function (urlToBeLoaded) {
    if (urlToBeLoaded === null) {
        this.closeFancyBox();
    } else {
        if (this.fancyboxIsOpen) {
            this.openInAlreadyOpenedFancyBox(urlToBeLoaded);
        } else {
            this.openFirstFancyBox(urlToBeLoaded);                
        }
    } 
}, 

openFirstFancyBox: function (urlToBeLoaded) {
    var that = this;
    $.fancybox.open({
        type: 'ajax',
        href: urlToBeLoaded,
        afterClose: function() {
            this.openFancyBox(null);
            return true;
        },
        afterShow : function() {
            that.fancyboxIsOpen = true;
            var ahref = jQuery(".fancybox");
            ahref.on("click", function(event){
                //stop the click action, we do not want to load the href in the window
                event.preventDefault();         
                var currentTarget = $(event.currentTarget);
                var urlToBeLoaded = that.getFancyBoxId(currentTarget);
            });     
        }
    });         
}, // end openFirstFancyBox




openInAlreadyOpenedFancyBox: function (urlToBeLoaded) {
    var that = this;

    $.fancybox.showLoading(); // show loading icon
    $.ajax({
        type: "GET",
        url: urlToBeLoaded,
        success : function(content, textStatus, jqXHR) {
            $.fancybox.hideLoading();                        
            jQuery(".fancybox-inner").html(content);
            $.fancybox.update();
        },
        error : function(xhr, status) {
            $.fancybox.hideLoading();
            return false;
        }
    });
},

closeFancyBox: function () {
    this.fancyboxIsOpen = false;
    $.fancybox.close();
},

getFancyBoxId: function (currentTarget) {
    var id = currentTarget.attr("href");  
    return id;        
},

重要的内容是jQuery(".fancybox-inner").html(content);用新内容替换当前fancybox的内容，并可选择$.fancybox.update();根据新内容调整窗口大小。

Answer 3

如果您不使用iframe。您可以尝试以下

jQuery.fancybox({'content' : html});

Answer 4

对于fancybox 3，请提出以下解决方案：

$(`.foo`).on('click', function(e) {
    e.preventDefault();
    const self = $(this);

    $.fancybox.open({
        type: 'ajax',
        src: self.attr('href'),
        opts: {
            afterShow: function(instance, current) {
                $('.bar').on('click', function(e) {
                    e.preventDefault();
                    instance.showLoading(current);

                    $.ajax({
                        type: 'GET',
                        url: $(this).attr('href'),
                        success: function(content) {
                            instance.hideLoading(current);
                            instance.setContent(current, content);
                            instance.update();
                        }
                    });

                });
            }
        }
    });
});

fancybox已经打开时更新内容

4 个答案: