Popup modal interaction help

Community resources General
1

Hi,

I’m trying to follow this tutorial to setup an interaction to trigger a popup on button click. https://help.webflow.com/hc/en-us/articles/33961286460947-Show-and-hide-elements-on-click

But I’ve run into a stumbling block. If anyone can assist I’d very grateful. Thank you.

2 minute Screen capture link below

External Media

Share link below for test page:

Graham

2

Hi Graham,

Here’s how to create a user-initiated pop-up in Webflow:

  1. First, create your pop-up wrapper div and style it with position: fixed, display: none, and your desired background color and dimensions
  2. Add your pop-up content inside the wrapper
  3. Select your trigger button on the canvas
  4. Click the Interactions icon (lightning bolt) in the top panel
  5. Click the + icon next to Element trigger
  6. Select “Mouse click” from the trigger options
  7. Under “On 1st click,” choose “Start an animation” from the Action dropdown
  8. Click the + icon to add a timed animation
  9. Select your pop-up wrapper element in the Navigator
  10. In the animation settings, change Display from “None” to “Flex” (or your preferred display type)
  11. Add opacity and transform animations as desired for a smooth fade-in effect

For the close button, repeat steps 3-8 but set the animation to hide the pop-up by changing the display back to “None.”

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

@WebflowAIModerator

That did help, all fixed now. Thanks.