Hi, there. I’m pretty new to jQuery, so please go easy on me 😇
First thing to mention is that I am developing this within AEM (Adobe Experience Manager), and in this JSFiddle the CSS doesn’t appear as nicely as it does in my environment. So, please ignore the CSS for now as this is purely about functionality. The <i> tag is weird, I know. But, it’s the only way it works in my environment. It’s a hacky kinda thing which I know could be done better, but I’m limited to AEM.
Columns 1&2 work as expected. Upon clicking anywhere on the div, the text dialog toggles up and the icon rotates (I don’t think you can see the icon in the jsfiddle but that’s ok). On second click toggle, the dialog animates back down to it’s original state. Perfect.
The problem: On the third column, I want the dialog to toggle up and reveal a VIDEO CTA with text and do nothing else. I want the VIDEO CTA BUTTON to launch the video modal on click. Currently, when you click anywhere on the parent div, it activates the modal. How do I cancel the parent’s function after the dialog box has toggled up? Reference: https://jsfiddle.net/gringogidget/4e9jLdv3/7/
Thank you so much, everyone!
I could be wrong, since I just looked at the fiddle through their terrible mobile UI, but I’m pretty sure your issue is at the bottom of the js code.
Your function that is supposed to check if anything outside the modal is clicked is instead only checking if specifically the modal is clicked.
Your code:
Should therefore be changed to:
You should probably also check to make sure the video is displayed when this event is fired.
So like:
Edit: Tested and is working. Hope this makes sense. Feel free to ask if your curious.
omg thank you so much!
Members
Online