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

【问题标题】：load specific div in modal window using fancybox使用fancybox在模态窗口中加载特定的div
【发布时间】：2012-05-19 14:48:35
【问题描述】：

我正在使用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 中所做的。

【问题讨论】：

标签： jquery ajax jquery-plugins fancybox

【解决方案1】：

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

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

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

【讨论】：

这在 HTML5 中无效，有没有办法 JS 做到这一点？

【解决方案2】：

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

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

所以在本例中，只会加载 #main-content 元素中的内容。

这允许我们只在移动设备上点击链接，但在桌面上加载fancybox内的页面而不需要页眉和页脚等。

【讨论】：

【解决方案3】：

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

【讨论】：