How do I close a pop up menu using a different button to the one used to open it?

Design help Animations & Interactions
1

Hello everyone!

I’ve just recently started using Webflow and I absolutely love it so far. I’ve been stuck on an issue for a couple of days now and it’s really frustrating me. I have created a pop up menu that can be accessed at the bottom of my site when you press the “Join Newsletter” button. Once the pop up has appeared on screen I can then cross this off using either the “X” in the top right of the pop up, or the “I’m not interested” text below our offer.

All this works smoothly on the first time round, however you can’t open up the pop up menu more than once without refreshing the page. I’ve also noticed that once I’ve accessed the pop up menu all other interactions on the page don’t appear to be working?

Can someone have a look at this and give me some suggestions?

Here is my read only link : https://preview.webflow.com/preview/firefly-designs-website-v2?utm_medium=preview_link&utm_source=designer&utm_content=firefly-designs-website-v2&preview=d2bcee8dd8711be9fbede0193bb26fb4&workflow=preview

Thank you in advance for anyone who can help me out! I really appreciate it.

Scott

2

HI @ScottN there are two things you should take care of.

  1. Fix error in custom javascript code as you have probably trying modify copied code and you have deleted closing brackets of one function.

error
error1922×728 75.5 KB

  1. Your interaction is working but your modal wrapper element has opacity: 0 so you need to take closer look on your animation settings.
1 Like
3

Hello @Stan,

Thank’s so much for the detailed breakdown! This worked wonders.

On my close pop up animation I animated the opacity of the modal wrapper to go down to zero, but didn’t have it going back up to 100% again on the open pop up animation.

Thanks again!

Scott