My goal on this question is to get two models to function right.
Note :
my example is using jQuery 1.9.1 + jQuery-ui 1.9.2
Expected Result:
Click a button that opens the first dialog (modal)
Inside this first dialog, it will be a button that opens another dialog (modal)
Second dialog should not close the first one
Second dialog will have a Youtube Iframe video
If i play the video and close its modal it should stop the Youtube video
If i click outside the modal it should close
Current Issues:
First Modal Works fine (close on click ESC or outside the modal), But Second Modal Doesn’t
Second Modal is closing the First Modal
Images:
1: https://i.stack.imgur.com/NdXUP.png
2: https://i.stack.imgur.com/ZZdsR.png
3: https://i.stack.imgur.com/nMi8p.png
Source:
http://jsfiddle.net/SystemDZ/k2g3on56/24/
Not to invite downvotes or frustrate you, but this seems like a good time to take a step back from this task and figure out if this is actually the UX you want here. In your screenshots and fiddle, the first modal literally has nothing in it other than the content that was already visible on the page. If that’s the case, what’s the purpose of that first modal, and is it really needed?
Hi Natalia, Thanks for responding.
The goal is to make two modals works.
So first modal is kinda quick view to the product.
and the second modal should be triggered from the first one.
This is just a simple example that i made to explain the issue.
But literally spent three days so far working on this. if you could help me solve it.
This is the problem:
When you open the second dialog, the first loses focus and so this event is triggered, closing the first dialog (which is open – the second one hasn’t opened at this point I think, so it’s not getting closed).
Yes, I tried this solution before, and know i think it’s commented on my code.
Best solution so far is : http://jsfiddle.net/SystemDZ/v2t0xa65/97/
Which still missing to assing onclick on the two generated divs, either ui-widget, or ui-widget-overlay. i could some how got it to work on inspect element but not on jsfiddle.
I have this exact same issue. I literally looked up “jquery” on Reddit to ask this same thing lol
Well, Guess what!!
You lucky because i’ve found the solution finally
http://jsfiddle.net/SystemDZ/k2g3on56/150/
There’s a lot of fundamentals that you’re missing in your work. For example, your using the same function attached to a class but expecting it to act differently. I would suggest choosing either class or id to attach their own closing functions to.
using the same function attached to a class but expecting it to act differently. I would suggest choosing either class or id to attach their own closing functions to.
Can you expand on this? Using the same function but having different behavior (when needed) based on data attributes seems like a good way to code similar behavior to me, as it avoids redundancy.
Make sense, Thanks for mentioning that.
Solution Finally lol
http://jsfiddle.net/SystemDZ/k2g3on56/150/
Members
Online