关闭后如何刷新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屋!