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);
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.
Related
I have created this bug that has been bothering me for quite some time.
Here -- > Ionic PlayGround
I have 4 modals. ReadMore, Comments, Replies and Images.
To recreate this follow this step:
Open readmore Modal. Inside which there is button to open comment modal. Click On it. Comment Modal opens up. Inside which there is another button for replies modal. Click on it.
Now close all the modals. and return to main page Open Images Modal (3rd Button), Inside which there is a button to open Comments Modal. Click On It--> It dosen't open , it does, but it opens behind the currently opened Modal. <---bug
I have raised an issue on github, but does any one know how to solve this problem?
Using ionic 1.0.0v
I am having an issue with integrating Code Mirror into a Bootstrap tab.
The problem is that because the Bootstrap tab is not set to active, code mirror will only display the content if the user clicks on it.
I have thoroughly searched a solution for the problem but have not found anything that works (possibly due to my knowledge about JavaScript not being very good). I have tried things like telling codemirror to refresh, but it doesn't solve the problem.
Calling .refresh() on the editor is what is needed here. You just have to make sure you do it after the editor actually becomes visible. I am not sure how to do this with Bootstrap tabs, but I'm sure there is some way to listen to tab change events.
I have tried to apply Magnific Popup to a content gallery.
Each link will open an individual popup from different gallery.
However, I bump into this issue that when the popup open, I click Next and all popups disappear. Meanwhile, if I click Previous, it still loads the previous popup.
Here is my code
http://codepen.io/anon/pen/EbDwJ
How can I fix the Next function here?
Seems like the plugin is having a hard time with the index being a string, you should cast it to an integer:
var index=parseInt($(this).attr('data-index'),10);
Here's the updated codepen
I have an odd problem with Fancybox. Using version 1.2.6 (yes it's old, but that's what I'm stuck with currently), I invoke an iframe via a button click (see screenshot below)
Everything is fine if the user selects a radio button and submits the form. However, if the user closes the fancybox then invokes the iframe again (using the same button click as before), the form is not clickable. Instead there are left and right arrows on the iframe as if it's trying to display a picture (see screenshot below)
The only way to 'fix' the issue is to reload the page or not dismiss the fancybox in the first place.
[UPDATE]
Here is how I invoke the fancybox. To dismiss the fancybox, you have to click on the "Modify Address" button.
$('#hidden_link').fancybox({
frameWidth:400,
frameHeight:500,
hideOnOverlayClick:false,
hideOnContentClick:false,
showCloseButton:false
}).trigger('click');
The element #hiddenlink is a hidden href.
[UPDATE 2]
Firebug displays the error Image corrupt or truncated: data:image/gif;base64,AAAA when this occurs. Not sure if that is related or not.
Does Fancybox create a container div for the modal on page load, or does it create it on demand? If it creates one on page load then it might offer a "destroy" or "delete" method you can call on close.
If it creates one on demand then you might be able to explicitly destroy the existing one on close.
I want to display 2 modal windows containing HTML content with jQuery.
But second modal window must be within the first.
So, here is main page, when I click link it opens first modal window, and then when I click a link in this modal window in opens second modal window.
I tried to do this with qTip, but I can't make second modal window.
I will be appreciate if somebody tells me how can I realize this. Thanks.
To me this sounds like an ui failure - modals within modals are not healthy for a user interface, and thus modal frameworks rarely support it.
If i was you I'd find another design rather than solve this problem programatically
I'd recommend the jQuery UI Modal Dialog, it should allow having two dialogs open at the same time.
qTip allows to open modal in modal.
Something is going wrong with your code.
Post it here and i can give you a solution!