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

[nightgrey]

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

[svossen]

+1

I'm using the same code as in the documentation: <button title="%title%" class="mfp-close"><i class="mfp-close-icn">&times;</i></button>. Like nightowl8, I have to click on the button itself. When I click on the <i> element, the close function isn't triggered.

[fredboyle]

+1

Would indeed be nice if the click event bubbled up to the parent mfp-close element.

[fredboyle]

A small workaround was to add || $(target).closest(".mfp-close").length to line 736 (where Nightgrey mentioned).

In my case I'm using an SVG element so in order for the click to properly bubble up I also needed to add a pseudo element using the following CSS to the mfp-close container:
&::before { content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; }

I then set a z-index of 1 for the child element (SVG) to make sure it sits below the pseudo element.

Did the trick for me, maybe it will do the trick for you.

[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>'

[sonicpunk]

I am having the same problem. I am using an svg as the close icon, so that I can change its color dynamically with css. The parent button with class "mfp-close" closes fine, but the child element, in this case the svg tag, does not close the popup. I really don't want to hack the core to fix this!!!

I will give Fredboyle's recommendation a try.

[tobiv]

I had this problem with a span inside the button. My workaround: add mfp-close to the inner element and reset the CSS. You'd have to adjust for the icon-font, i.e. instead of resetting the font in i.mfp-close you could add !important to the icon class. YMMV.

.mfp-image-holder span.mfp-close {
    display: inline;
    position: static;
    text-align: left;
    padding-right: 0;
    width: auto;
    height: auto;
    line-height: inherit;
    opacity: 1;
    padding: 0;
    color: black;
    font-style: inherit;
    font-size: inherit;
    font-family: inherit;
}

[beardsavvy]

@fredboyle Thanks for the solution! I was able to do it with just the CSS - I'm using v1.0.0 of magnific (Sept 2015).

[Saabbir]

Use mfp-close class in the icon element itself rather than wrapping in the another span element. Like -
closeMarkup: '<i class="zmdi zmdi-close mfp-close"></i>' It should work perfectly and same goes to arrowMarkup @nightgrey

[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; }