Fancybox是一个流行的jQuery插件,用于创建优雅的模态窗口(灯箱效果),常用于图片、视频、iframe内容或HTML元素的展示。当需要动态地向已打开的Fancybox实例中添加内容时,就需要了解如何"追加"内容到当前实例。
beforeShow
回调$.fancybox.open({
src: '#initial-content', // 初始内容
type: 'inline',
beforeShow: function(instance, current) {
// 在显示前追加内容
$('#initial-content').append('<div>追加的内容</div>');
}
});
// 打开初始Fancybox
var fbInstance = $.fancybox.open({
src: '#initial-content',
type: 'inline'
});
// 稍后追加内容
function appendToFancybox(newContent) {
// 获取当前实例
var currentInstance = $.fancybox.getInstance();
if (currentInstance) {
// 追加内容到当前显示的DOM元素
$(currentInstance.current.$content).append(newContent);
// 如果需要重新计算尺寸
currentInstance.update();
}
}
// 使用示例
appendToFancybox('<div>动态追加的内容</div>');
// 打开初始内容
$.fancybox.open({
src: '<div id="fancy-content">初始内容</div>',
type: 'html'
});
// 追加内容
$('#fancy-content').append('<p>新追加的段落</p>');
// 更新Fancybox实例
$.fancybox.getInstance().update();
update()
方法$.fancybox.getInstance().update()
以上方法适用于Fancybox 3.x版本,如果是使用更早版本,API可能会有所不同。
没有搜到相关的文章