Complete guide: creating a custom modal (pop-up) in Webflow

Introduction

Modals (or pop-ups) are essential elements in the web world. They can be used to display additional content, present calls to action that are bound to attract your visitors' attention and, if used wisely, can be a good way of optimizing your pages' conversion rate.

In this article, I'll show you how to create a custom modal in Webflow, without having to dive into the code. Let's get started! 🚀

1) What is a modal?

To begin with, let's take a moment to understand exactly what a modal is and why it can be so interesting for our websites.

A modal is a pop-up window that appears on top of the main content of a web page. Either automatically after a certain period of time, or after an action has been performed on a trigger (a click on a button, for example).

One of the main advantages of modals is their ability to focus visitors' attention on a specific element, without them needing to leave the page.

Imagine a testimonials section on your website: rather than overloading your page with long testimonials, you can display eye-catching excerpts with a button to find out more. When a visitor clicks on this button, a pop-up window opens, displaying the full testimonial with additional details.

This approach allows your visitors to get an overview first, then dive deeper into detailed content if they're interested.

5 original uses for pop-ups

2) How a modal works in a web page

But before we dive into the creation of our Webflow modal, let's see how it works in practice.

To put it simply: a modal is an element hidden on the page until a specific action triggers its appearance (usually a click on a button). When you activate this trigger, an interaction in Webflow changes the modal from hidden to visible.

Finally, we've also added a "Close" button inside the modal. When you click on this button, another interaction is activated, hiding the modal again and allowing you to resume browsing the page.

To ensure that the modal always remains visible, even when you scroll down the page, we use the CSS property "position: fixed" to keep the element fixed in relation to the browser window. So even if you scroll, it will always remain in place.

Now that we know how our modal will work, let's dive into the next part to explore in detail how to create and customize this feature on Webflow!

3) Create the modal structure in Webflow

So let's get down to business in Webflow. To begin with, set up the component's basic structure:‍

1) Add a Div Block that will encompass all the elements of your modal and make it easy to manage the component.

Give it a class (e.g. "modal_component").
Give it a Fixed" position so that it always remains visible when scrolling, and set this position to "Full" so that it takes up the whole screen.

Make sure to center child elements with "Flexbox".

2) Inside the "modal_component", create a first Div Block to be used as a background (or overlay).

Give it a class (e.g. "modal_overlay").
Give it an "Absolute" position and set this position to "Full" so that it covers the entire component.
Give it a dark background color with reduced opacity to darken the page content (e.g. #1C47C8 at 25% opacity).

3) Inside the "modal_component", create a second Div Block for the modal itself; this is where you'll add the pop-up content.

Give it a class (e.g. "modal_container"), a "Relative" position and a high z-index so that it's not hidden by the overlay or other page elements.
Give it a background color so that its content is correctly visible (e.g. #FFFFFF) and customize its style according to the desired design (width, border-radius, etc.).

Then add the desired elements: text, images, buttons or forms.

4) Inside the "modal_component" or "modal_container", add at least one element to allow the user to close the modal, such as a "Close" button or an icon in the top right-hand corner.

5) Once you've set up your structure, set the .modal_component to "Hide " so that it doesn't appear as soon as the page loads.

4) Create the interaction to show or hide the modal

Now that the modal structure is in place, let's move on to adding the interactions that will make the modal functional.

1) Create the modal opening interaction.

Select the button or element you wish to use to open the modal.
Go to the element's "Interactions" tab, click the "+" button on the Element Trigger tab to add a new interaction and select the "Mouse click" event.
Choose whether you wish to assign the interaction to the selected element only, or to all elements with the same class, and create an "On first click" interaction.
Select the modal component in the browser, add a "Hide/Show" action and set it to "Flex" to display the modal when the button is clicked.

If you want to make the animation more fluid, you can enhance this basic interaction by playing with opacity and/or moving the modal, for example.

2) Create the modal closing interaction.

Select the close button inside the modal and add a click interaction to it (as for the open interaction).
Select the modal component in the browser, add a "Hide/Show" action and set it this time to "Hide" to hide the modal when the close button is clicked.

Here too, if you want to make the animation more fluid, you can enhance the basic interaction with opacity and/or displacement effects.

By adding these interactions, you transform your basic structure into an interactive modal component that can be opened and closed in response to user actions. Don't forget to test the modal in the preview to ensure that all interactions work correctly.

5) Enhance the modal component with Finsweet attributes

To push your modal even further and deliver an optimal user experience, you can take advantage of some of the advanced features of the Finsweet attributes. Two particularly useful attributes are "Mirror Click Events" and "Disable Scrolling".

Mirror Click Events

The "Mirror Click Events" attribute lets you ensure that a click on one class automatically triggers a click on another. When the modal is open, this feature can therefore ensure thata click on the overlay is also registered as a click on the close button. This means that your users can close the modal by clicking anywhere outside the modal content itself, greatly improving accessibility and user experience.

What to do?

Paste the script in the head code of your page, in the custom code :

<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-mirrorclick@1/mirrorclick.js"></script>

Add a custom attribute fs-mirrorclick-element: "trigger" to your background.

Add a custom attribute fs-mirrorclick-element: "target" to your "Close" button.

Disable Scrolling

The "Disable Scrolling" attribute allows you, as its name suggests, toactivate/deactivate when a class is clicked. By enabling this attribute when the modal is open, you automatically suspend scrolling of the page in the background. This prevents the user from scrolling below the modal, ensuring that they remain focused on the modal content and improving focus on the current interaction.

What to do?

Paste the script in the head code of your page, in the custom code :

<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-scrolldisable@1/scrolldisable.js"></script>

Add a custom attribute fs-scrollldisable-element: "disable" to your opening button.
Add a custom attribute fs-scrollldisable-element: "enable" to your close button.

Adding these attributes will help you enhance the overall user experience by offering smooth, effortless interactions.

Conclusion

Creating a custom modal may seem complex at first, but with the right tools and an understanding of the necessary structure and interactions, you can easily add them to your websites. Modals offer a good way of displaying additional information or enabling users to perform specific actions, while maintaining smooth navigation and a good user experience.

By following the steps we've explored, from preparation in Webflow to customization of style and interactions, you now have all the keys you need to create and integrate custom modals that perfectly match your needs and design.

Want to learn more web design tips like this one?