使用fancybox在模态窗口中加载特定div

我正在使用fancybox 2.我已经设法通过AJAX在fancybox中加载内容。 但它加载整个页面，我只对特定的div感兴趣。 在fancybox 1中，我们可以通过在ajax中添加filter来实现。 但我不知道如何在fancybox 2中过滤。

如何从fancybox 2中的AJAX加载页面中过滤特定的div？

$(".fancybox").fancybox({ maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none', type : 'ajax', 'ajax' : { dataFilter: function(data) { return $(data).find('#modalArticleContainer')[0]; } }); 

untile ajax它工作但加载整个页面，当我添加filter然后它停止工作。 这就是我以前在fancybox 1中所做的。

Answer 1

如果你使用的是最新版本（https://github.com/fancyapps/fancyBox/zipball/master），那么有一个技巧可以从ajax响应加载特定元素 –

 Load ajax $(".fancybox").fancybox(); 

Answer 2

我已经使用afterLoad回调来更新内容以找到您的特定元素。

 $('.fancybox').fancybox({ afterLoad : function() { this.content = $("
").html(this.content).find("#main-content").html(); } }); 

因此，在此示例中，仅加载#main-content元素中#main-content 。

这允许我们只关注移动设备上的链接，但是在桌面上的fancybox中加载页面而没有页眉和页脚等。

Answer 3

使用fancybox 3它更简单：

 AJAX Content 

看看演示