Learn how to trigger a click animation to show a pop-up.
We’ll show you how to build a pop-up that’s a tad different — one that's user-initiated. The user clicks a button to start the pop-up animation, which shows a form. (Of course, you can also switch up the trigger to meet your needs.)
In this lesson:
You’ll need to create an overlay for your content — you can do this in 3 steps:
To add a Div block to serve as the wrapper for the modal, press A on your keyboard to open the Add panel (or click the plus icon in the top left) and drag a Div block element into your project.
To help keep your project organized, place the Div block at the top of your project's Body element (it is not required that we place this element at the top, but it helps with organizing the elements). To make this easier, drag the element into the Navigator and place it inside the Body element.
With the Div block selected, give it a class name like “Pop-up wrapper” and add style in the Style panel:
Scroll down the Style panel to add the next few style settings so that the wrapper is taking up the full view
Add a background color to help the pop-up standout from the rest of your project’s content. Try #000000 with an opacity of 80% — or, any background color that fits your project.
To have a pop-up with a form, you'll need a Form element inside the wrapper.
With the wrapper selected, add a Form using the Quick Find feature:
Using this combination of style keeps your form from being larger than 500 pixels (500px max-width) while making sure that it’s responsive to various device sizes (100% width). Learn more about responsive design in Webflow.
Next, we’ll add a text link so people can close the pop-up once they’ve submitted the form.
To do this - drag a Text link in the Navigator to the top of our “Pop-up wrapper” (again, it is not required that we place this element at the top, but it helps with organizing the elements).
And with it selected, give the link a class name (e.g., Pop-up close) and add some style to it:
Using this combination of style keeps your close link at the top of your pop-up wrapper.
Now, you have all of your elements created in your pop-up. Next, set the display style of the “Pop-up wrapper” to None so that it is hidden when it is not in view.
Let’s make the opacity of the “Pop-up wrapper” 0%. Changing the opacity to 0% will set you up to create a smooth fade-in animation when you build the interaction.
The last thing you need for your project is an element to trigger the pop-up, like a button. Clicking the button will trigger the pop-up to open.
To add a button:
With your button added to the project, you can now set up an interaction to trigger the pop-up to show when the button is clicked.
And, you can do this by first selecting the button on the canvas. Then, click the Interactions icon to open the Interactions panel
In the Interaction panel, click the + icon for Element trigger, and select the Mouse click option.
Webflow gives a few pre-created interactions, but you’re going to create a custom interaction to show your pop-up. And, your pop-up is going to fade-in when someone clicks on your button. To do this - under On 1st click - click the Action dropdown to select the Start an animation option. Next, click the + icon to add our timed animation
Now, you can name your animation (e.g., Pop-up), and then select the element you want to animate.
Note: Make sure you select the element while the Interaction panel is open.
For this project, you’ll select the “Pop-up wrapper” element from the Navigator. Next, click the + icon next to Actions, then click Opacity (this will first set the initial state of our opacity).
Now, for our timing (and we can see our timing at the bottom of the panel) you want to first toggle on the Set as initial state option, and set the value to 0%.
Next, click the + icon next to Actions, then click Hide/Show (this show our hidden pop-up, but the opacity will not yet reveal it). And, we want to set the Display to Flex.
The last step we want to build is to change the opacity from 0% to 100%. To do this, click the + icon next to Actions, then click Opacity (adding this step automatically sets it to 100%).
Finally, click the Done button, and publish your project. Now, when you click your button - it will show your pop-up. But, you can’t close it, so we’ll need to create an interaction on the “Pop-up close” link.
To create a close interaction, you first need to select the “Pop-up close” link in the Navigator.
Then, you can create your interaction to close your pop-up when the link is clicked.
To do this:
Finally, click the Done button, and republish your project to test your pop-up.
And that’s building a pop-up with fixed positioning. Nice work!
Something went wrong while submitting the form. Please contact email@example.com