Pop-up doesn't close

Design help Animations & Interactions
1

Hi everyone!

I followed this tutorial to create a modal How to build a pop-up modal in Webflow | Webflow Blog but the close button isn’t working when I preview in the interactions panel it shows correctly but when I preview the entire site or the published link it doesn’t work.

Yo can activate it clicking in the dog or the text that says Puppies. I have to keep it nested since there is going to be multiple modals, one for each “dog”

Public Link: http://waggo.webflow.io/pet-trainer

In this link you need to access the “Pet Trainer” Page: https://preview.webflow.com/preview/waggo?preview=8fe2aac9c5150d7f77c76c7983c6ca37

Thank you for your help :slight_smile:

2

I am taking a look right now. But have you thought about doing this using the new interactions rather than legacy?

EDIT*
Using the new interactions works perfectly when I recreate what you are trying to do.

3

@PHRyan I may be wrong, but when I tried using the new interactions I found difficult to duplicate the same interaction for multiple objects. In the old interactions all I have to do is click nested elements.

I need to create the same pop-up for 8 elements in the same page. Is there a way to make it easy?

Thank you!

4

Well, I believe the way you have it set up you could just leave it how it is. Keep the Legacy interactions the same but just make the pop-up close button on the new interactions. Target the “modal-wrap” and then change “Affect” to “All elements with this class” instead of “Selected Element”. That way, any instance of the pop-up would close no matter what.

Here is a screenshot of what I mean:
untitled

1 Like
5

Thank you it worked perfectly. I wasnt aware of the Target “All elements with this class” option! :slight_smile:

1 Like
6

Glad I could help! And that version of “This Class” was just recently added a week or 2 ago. Very helpful haha :wink:

1 Like