carga div específica en la ventana modal usando fancybox

Estoy usando fancybox 2. He logrado cargar contenido en fancybox a través de AJAX. Pero carga toda la página y solo me interesa el div específico. En fancybox 1 podríamos hacerlo agregando un filtro en ajax. Pero no estoy seguro de cómo filtrar en fancybox 2.

¿Cómo filtrar div específico de la página cargada de AJAX en fancybox 2?

$(".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 funciona pero carga toda la página, cuando agrego el filtro, deja de funcionar. Así es como lo hice anteriormente en fancybox 1.

Si está utilizando la última (https://github.com/fancyapps/fancyBox/zipball/master), hay un truco para cargar un elemento específico de la respuesta ajax:

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

afterLoad esto utilizando la callback afterLoad para actualizar el contenido para encontrar su elemento en particular.

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

En este ejemplo, solo se cargará el contenido en el elemento #main-content .

Esto nos permite simplemente seguir el enlace en el móvil, pero cargar la página dentro de fancybox en el escritorio sin el encabezado y el pie de página, etc.

Con fancybox 3 es aún más simple:

 AJAX Content 

Mira la demo