超出了壮观的弹出窗口和Bootstrap 3模式调用堆栈

Question

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?

Answer 1

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);

Answer 2

If you don't want to do meddle in the magnific popup code, github user alyak46141414 later suggests in the same issue

so , I did

$(document).off('focusin' );

after after magnific load ( any funcrion called after it loaded , you may do inside .ready(). it clear all 'focusin' handlers . no magnific popup code modification need .

Both this and Craig Harschbarger's (your) answer worked for me.