Using an icon font for .mfp-close and .mfp-arrow buttons

Hey folks,

at first: Magnific Popup is really great! Thanks for the plugin!

So, I’m using Magnfiic Popup on a site where I use an icon font everywhere, namely the famous “Font Awesome”, and thanks to the versatile options I could change the close and arrow button markup. This is how I did it:

$.extend(true, $.magnificPopup.defaults, {
    tClose: 'Schließen', // Alt text on close button
    tLoading: 'Laden ...', // Text that is displayed during loading. Can contain %curr% and %total% keys
    gallery: {
        tPrev: '« Vorheriges', // Alt text on left arrow
        tNext: 'Nächstes »', // Alt text on right arrow
        tCounter: '%curr% von %total%', // Markup for "1 of 7" counter
        arrowMarkup: '<span title="%title%" class="mfp-arrow mfp-arrow-%dir%"><i class="fa fa-angle-%dir%"></i></span>'
    },
    image: {
        tError: '<a href="%url%">Das Bild</a> konnte nicht geladen werden.' // Error message when image could not be loaded
    },
    ajax: {
        tError: '<a href="%url%">Der Inhalt</a> konnte nicht geladen werden.' // Error message when ajax request failed
    },
    closeMarkup: '<span title="%title%" class="mfp-close"><i class="fa fa-times mfp-close-icn"></i></span>'
    });
}

The problem now is I can’t click exactly on the icons. The close event only triggers if the target is $('.mfp-close') and in my case, the target is the icon font <i>. It works if I click a little bit next to the icon as the .mfp-close boundaries are a bit bigger than the icon itself.

I also can’t click on the next or previous arrows as the target is the icon font <i>and the lightbox instantly closes. I suppose line 736 of jquery.magnific-popup.js (compiled, unminified version) is responsible for this behaviour:

// We close the popup if click is on close button or on preloader. Or if there is no content.
if(!mfp.content || $(target).hasClass('mfp-close') || (mfp.preloader && target === mfp.preloader[0]) ) {
    return true;
}

I made an example on CodePen: http://codepen.io/anon/pen/JoWwxZ Just click on the close or arrow buttons, then click a little bit next to the icons and it works.

If I add an “or target is $(‘.fa’)” to this condition, everything’s working fine, but this can’t be the solution. I think the plugin shouldn’t behave like this, right? You are able to change the markup of the buttons after all and everytime someone adds a child element to the close button will have this problem.

Can anyone think off a solution for this problem?

Thank you in advance, nightowl

[zomars]

In my case I used SVG icons and solved it by preventing click events on every children but the button itself like this .mfp-close > * { pointer-events: none; }

[jordif]

Hi,

I’ve encountered the same problem when trying to use font awesome icons for the left and right arrows. I think the easiest solution is to add the class “mfp-prevent-close” to the <i> tag (or any tags inside the button).

arrowMarkup: '<span title="%title%" class="mfp-arrow mfp-arrow-%dir%"><i class="fa fa-angle-%dir% mfp-prevent-close"></i></span>'