Last week I followed this tutorial to set up a popup modal for a website I’ve built. The popups function is to gather information from site visitors, but only when the button to activate it is clicked on by the site visitor. The tutorial create a popup with a little more complexity than I wanted, so I dug around a little more and eventually was able to create a popup that functioned the way I wanted it to. However, after publishing and testing, I found that the button would only work once unless the page was reloaded. Ideally, it should work whenever it’s clicked upon, since I was asked to include the button in several spots on the page.
Any solutions or suggestions as to how I could solve this would be appreciated.
When using interactions for buttons, keep in mind that our interactions are set up for first and second click instances. SO if you do not set up the second click to close, this could very well be your issue.
When previewing the site I do not see the button in question. Could you please provide a screenshot of which you are referring to?
Because the modal opens up with an overlay, there’s no way to click the button a second time. I currently have a X in the upper right hand corner of the popup to close it. Is there a way to activate the close function of the main button when the X is clicked? I’ve been using Webflow for about a year now, but interactions are still a little beyond me. Maybe I need to dig a little deeper into the tutorials.
Is there another way to create a popup modal that would work with a form? If not, I feel like that would be a useful component to have within Webflow.
Ok, so I went back and followed the original tutorial from the Webflow team (the one I linked in my original post) on how to create a popup modal. There seems to be a few differences in the Panel now, versus when the tutorial was created, and I think that’s what’s causing the problems for me. I don’t know if I’m targeting the right elements or what, but I can’t get the modal to close now. If I could get a second pair of eyes to look at it and tell me what I’m doing wrong, I’d appreciate it. Thanks!
Hi Brandon, thanks again for your help. I gave it another go this morning and managed to get it working. If you want to take a look at it, feel free to, but I think I’m good now.
Hey Brendan, I’m not 100% sure how I fixed it. I just went back through the video tutorial, pausing at all of the individual steps and making sure I had done everything correctly. After I’d done that, it worked correctly. If you have an extra monitor, it helped to have the video full screen on one monitor while I worked on the other. Good luck!
For anyone else having this problem, I fixed it by adding an on page load interaction that sets the popup to display none with it being set as the initial state
