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

时间:2012-05-11 00:50:09

标签: jquery ajax jquery-plugins fancybox

我正在使用fancybox 2.我已经设法通过AJAX在fancybox中加载内容。但它加载整个页面,我只对特定的div感兴趣。在fancybox 1中,我们可以通过在ajax中添加过滤器来实现。但我不知道如何在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它工作但加载整个页面,当我添加过滤器然后它停止工作。这就是我以前在fancybox 1中所做的。

3 个答案:

答案 0 :(得分:2)

如果您使用的是最新的(https://github.com/fancyapps/fancyBox/zipball/master),那么有一个技巧可以从ajax响应加载特定元素 -

<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>

$(".fancybox").fancybox();

答案 1 :(得分:2)

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

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

因此,在此示例中,只会加载#main-content元素中的内容。

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

答案 2 :(得分:0)

fancybox 3更简单:

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#yourDivId" href="javascript:;">AJAX Content</a>

查看demo