I'm having an interesting issue when combining Boostrap 3 Modal with Magnific Popup. I have a Bootstrap Modal that contains a list of videos, and each video has a view link that opens up a Magnific Popup iframe popup.
Everything worked fine until I played with Magnific Popup's z-index in order to get it to appear on top of the Bootstrap Modal. Problem is, if you try and close the Magnific Popup (or interact with it at all) a stackoverflow error occurs (Maximum call stack exceeded).
Note: Everything works fine if I leave the z-index of the Magnific Popup alone.
Simplified Example: http://codepen.io/craigh/pen/GoWWOK/
Note: codepen suppresses SO errors, so the issue is not as obvious. But on my site, the SO occurs locking the browser up.
I think it has something to do with how clicking outside of a Bootstrap Modal closes the modal, but I changed the modal backdrop to static (forces user to click the x or close button) but no change. Any ideas?
Someone posted the answer to this question in a github issue about this same problem. Commenting out a line of code seems messing it does do the trick and I haven't found any side effects as of now.
Taken from github user RandomArray's response
Line 375 seems to be the problem. I commented it out and the Maximum call stack size exceeded error went away.
_document.on('focusin' + EVENT_NS, mfp._onFocusIn);