关闭后如何刷新Fancybox内容? [英] How to refresh Fancybox content when closed?

问题描述

在关闭后，是否有办法重置fancybox实例或刷新其内容? 请注意，它从同一页面上的div获取内容.

Is there a way to reset the fancybox instance or refresh the contents of it, when closed? Note that it grabs content from a div on the same page.

我希望它在重新打开fancybox时像第一次加载到dom中一样显示内容.

I want it to display the content like it was first loaded into the dom, when re-opening the fancybox.

我想这比Fancybox更像是javascript/jQuery，对吧?

I guess this is more of a javascript/jQuery thing, than a Fancybox thing, right?

$.fancybox.open({
    href: '#popup',
    padding: 0,
    autoWidth: true,
    arrows: false,
    closeBtn: false,
    scrollOutside: true,
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(0, 0, 0, 0.5)'
            },
            locked: false
        }
    },
    afterClose: function() {
        // Reset or refresh here
    }
});

推荐答案

这取决于您对目标div所做的更改，但是如果不重新加载页面，您将无法重置"它们，或对页面执行时髦的Ajax调用并从那里获取div内容.

It depends on the sort of changes you are making to the target div, but you will not be able to "reset" them without reloading the page, or performing a funky Ajax call to the page and getting the div contents from there.

解决此问题的最简单方法是将div的标记存储在变量中(使用jQuery的html()，然后在afterClose()回调中使用该变量重置"该div.

The simplest way of getting around this would be to store the markup of that div in a variable (using jQuery's html(), and "reset" that div using the variable in your afterClose() callback.

JS

var content = $('#popup').html(); // store content on documentReady()

$.fancybox.open({
    href: '#popup',
    padding: 0,
    autoWidth: true,
    arrows: false,
    closeBtn: false,
    scrollOutside: true,
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(0, 0, 0, 0.5)'
            },
            locked: false
        }
    },
    afterClose: function(){
        $('#popup').html(content);
    }
});    

最好结合使用fancybox的beforeLoad回调来对所有内容进行此操作，但是由于您似乎正在加载单个div，所以应该可以.

It might be best to use fancybox's beforeLoad callback, in conjunction with this, to do this for all of your content, but as you seem to be loading a single div, this should work.

这篇关于关闭后如何刷新Fancybox内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！