Trying to implement a magnific pop-up for ajax content. Only want to load an element from the page that the link is pointing to. To make it easier I'm using "data-fragment" as an attribute on the links. Markup looks like this:
<a href="browse-taxonomy.html" class="modal-ajax-fragment" data-fragment="#browse-taxonomy" title="Browse">
JS function looks like this:
$( '.modal-ajax-fragment' ).magnificPopup({
type: 'ajax',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
disableOn: 480,
callbacks: {
parseAjax: function( mfpResponse ) {
var mp = $.magnificPopup.instance,
t = $( mp.currItem.el[0] ),
fragment = ( t.data( 'fragment' ) );
mfpResponse.data = $( mfpResponse.data ).find( fragment );
console.log( 'Ajax content loaded:', mfpResponse );
}
}
});
Works GREAT in all modern browsers (Chrome, FF, Safari, IE10) -- but I must be doing something wrong b/c it absolutely chokes in IE9 and below. IE's console/inspector tells me nothing -- sometimes it will work after spinning for minutes -- sometimes it just locks the program up.
Any ideas what could be causing such headaches for IE? Thanks!
Solution: remove the line that logs the mfpResponse to the console:
// console.log( 'Ajax content loaded:', mfpResponse );