Open nightgrey opened 9 years ago
+1
I'm using the same code as in the documentation: <button title="%title%" class="mfp-close"><i class="mfp-close-icn">×</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.
+1
Would indeed be nice if the click event bubbled up to the parent mfp-close element.
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.
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>'
Great great jordif! It works adding "mfp-prevent-close" to the <i class="...> Thank you!
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.
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;
}
@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).
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
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; }
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:
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: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