Streaming live at 10am (PST)

CMS Collection items won't trigger modal popup

Hello!

I am having an issue with the Webflow interactions and my modal popup. What I’d like to achieve is by clicking on a staff member’s photo, it will bring up a modal popup containing the bio. I’ve followed the Webflow tutorial to the letter multiple times making sure I’ve got each interaction a trigger set correctly and it still isn’t working. It seems to be hung up on the actual “Open Modal Window” interaction. The initial hide/show state on page load works fine, but when I go to test it out, I click the photo and… well nothing happens.

I’ve browsed other forum topics on this already, along with a person who had the exact same issue as me, but they never got any replies, so no help there.

This is fairly urgent, so any help you all can offer would be most appreciated. TIA!


Here is my public share link: https://preview.webflow.com/preview/kesem-rebuild?utm_medium=preview_link&utm_source=designer&utm_content=kesem-rebuild&preview=944a2e2ff2c08f0add7553d8c700f2df&pageId=6170ce091e3ef7bd6a9843fd&workflow=preview
(how to access public share link)

Hi @Morgan_Decker, thanks for your post.

I took a look and might suggest to put as a first step in the interaction to set the modal container class to display flex:

Shared with CloudApp

It appears the modal is set as an initial state to display none, then the interaction needs to set that to change from display none.

After making the change it looks like this for me:

I hope this helps

Thanks so much, that did it! If I could have just one more moment of your time, @cyberdave - now the modal is working perfectly but only triggers on the first click. I tried repeating the animation for the modal window (the one with all of the content) but it still isn’t showing up. You can check out the issue in staging here: Who is on the leadership, staff and national board of Kesem? (webflow.io)

Thanks again for your help, you rock!

Hi @Morgan_Decker, thanks for your reply. I would probably duplicate the actions that are targeting the modal container and then change the target to the modal window so that when the trigger is tapped both elements become visible:

Shared with CloudApp

I hope that helps