All about creating modals in Webflow

In web design & development, a modal is simply a pop up that directs a visitors attention to whatever is inside it.

What is a modal?

As mentioned in the text above, a modal is basically a pop up that contains some kind of content.

Normally a modal consists out of three elements, a background overlay (outer wrapper), a container for its content (inner wrapper) and whatever content you choose to put inside it.

When do you use modals?

I’m sure you already know what these are used for, but let’s go with an example.

Let’s say you have a login system for your users.

When a user presses a login button, a login form pops up directly on top of whatever content that’s underneath.

This could be great from a UX perspective, since the user won’t have to be redirected to another page.

Another great example of using modals is when you want to show a video without redirecting a user away from your site, and without taking up any screen real estate on your page.

Simply design a sleek play button and let a modal containing the video popup.

This guide will show you a few ways of creating and customizing modals in Webflow.

Making a simple modal in Webflow

The “standard” way of creating modals in Webflow is by using the integrated interactions.

As stated a few paragraphs above, a modal consists of three elements (or layers).

1. The background overlay aka. the outer wrapper
2. The container aka. the inner wrapper
3. The content

Let’s go through how to make all of these and beyond.

The outer wrapper

Let’s start off by creating the background overlay. In this example, it’s a simple div named outer-wrapper set to a fixed, full width positioning on top of some content below.

This positioning will make sure that the overlay always covers the full screen width and height no matter the screen size.

Set a background color of your choice, and lower its opacity a bit.

Important! Change the opacity of the background color itself, not the opacity of the whole outer wrapper.

In order to center the inner wrapper inside the outer wrapper (as you usually would with these kinds of modals), set the outer wrappers display setting to flex, and center it horizontally and vertically.

Now we’re done with the overlay, aka. outer wrapper.

The inner wrapper

Let’s continue with the inner wrapper that will hold all of the modals content.

This one should be another div with a set background color and maybe some padding to space its content out a bit.

It could look something like this.

Now insert whatever content you want inside the inner wrapper. I’ll add a heading and a video.

Amazing. Now the modal is almost done. The last thing we want to add is a close button inside the inner wrapper.

The close button

I’ll simply drag in a simple SVG icon inside the inner wrapper. You can find the one I’m using by clicking here.

But wouldn’t it look good to have this positioned in the top right corner? Yes it would.

To position this icon, we’ll first set the inner wrappers position to relative.

Then set the icons position to absolute and position it top right and give it some padding. It should look something like this.

Another important thing from a UX perspective is to make the little icon look like it’s clickable, by changing its hovering cursor to a pointer. You can do that through Webflow’s cursor setting.

Now the modal is done. Celebrate with some coffee and come back to continue with the interactions.

Interactions

Close interaction

Let’s start with the closing interaction since the modal is already displayed on the page.

1. Select the close button
2. Add a new “Mouse click” interaction
3. Select a new action “on the first click”.
4. Add a new timed animation
5. Name the animation to something like “close modal”

When we click the icon, we want the modal to close with a smooth opacity transition.

Now it’s important to keep track of what elements you want to be affected by interaction. In this case we want the outer wrapper to disappear.

Select the outer wrapper and add a new opacity action. I’ll use a 250ms speed with an ease-in-out transition.

In order to get the content underneath clickable again, we also have to set the outer wrappers display setting to none.

Add a new show / hide action, and set the display setting to hidden.

Okay, that should be it for the closing interaction. It should work great.

But how would we go about showing the modal when clicking an element? Let’s dive into that next.

Open interaction

Start out by setting the outer wrappers display setting to hidden as default. This will make it hidden at all times and won’t interfere with the other elements on your page.

Select the element (or button) you want to open the modal with, and add a new mouse click interaction. I’m just gonna use a simple default Webflow button.

Select the outer wrapper and set its opacity to zero. This action should be set at its initial state by clicking the little button in the “timing” setting as demonstrated with a red circle in the image below.

Add another keyframe and set the outer wrappers opacity to 100%. This will make the interaction look smooth.

I’m using the same timing and easing settings as the “close interaction” to make everything look neat.

Okay, we’re almost done, but there’s one more important thing you have to do.

You have to remember to change the outer wrappers display state, since it’s set at hidden on default.

Select the outer wrapper again add another action in which you set the show / hide setting to flex. It should look something like this:

Okay, let’s try it out.

Beautiful. Now you have a great looking modal that can be used anywhere on your site.

Not having to use a close button

Sometimes you want alternative ways of closing the modals. The more natural ways you have, the better it is from a UX perspective.

Let’s use the same modal but add a feature to close it just by clicking anywhere outside of the inner wrapper.

For this to work, you need to add a new div, set at a full fixed position.

This one will work as the outside trigger, which will close the modal. We’ll name the div “modal-outside-trigger”.

Now you have a new problem though. This div will span over the whole viewport, on top of everything else, which will make any part of the page clickable.

We don’t want to be able to close the modal by clicking inside the inner wrapper of the modal itself.

That’s where z-index comes in handy.

Set the z-index of your inner wrapper to something like 5 (or anything 2 or higher).

Then set the z-index of your outside trigger to something lower than 5. I’ll set it to 4. That way I can be sure that it’s on top of the outer wrapper, but behind the inner wrapper.

Okay, now that this problem is solved, let’s continue.

This step is basically the same as the last step of the first modal technique.

Simply add a new interaction on the outside trigger, and reuse the same close interaction as you already made for the close button.

And that’s it. Now let’s test it out.

Beautiful, you have now created a really good modal that can be used for so many things.

But as I said earlier, having multiple ways of closing these modals could be good from a UX perspective.

Okay, this is all good. But how would we go about integrating these modals to work with the CMS? Let’s dive into this next.

Using modals with the Webflow CMS

Let’s start off by adding a collection list. If you’ve ever worked with Webflow’s CMS, this should be easy.

I’ll make a new section and set up the collection items as a grid to make it look pretty.

Now, let’s drag the outer wrapper div into each collection item.

The setup should look something like this:

As you can see, I just pasted the outer wrapper div inside the collection item, which automatically added it to all of the items in the grid. Easy.

Now it’s time to edit the content inside the modals themselves.

Temporarily set the outer wrapper to “display: flex” in order to see the content.

I want to get every title and every thumbnail for all of my collection items.

To do this I have to add a heading as well as an image into the inner wrapper.

Now simply go into the settings of the heading and image to connect them to the CMS.

Okay, now hide the outer wrapper again by setting its display setting to hidden.

Let’s publish the site and watch it in action.

Okay, that’s it. Now you know a lot about how you can create modals in Webflow.

If you have any questions or want me to help you with your projects, feel free to contact me here.

Bye /Robin G 🤙