Creating a modal in Webflow

Adding interactions in Webflow to trigger a modal view on click

Modals are an easy and quick way to show more detailed information about a specific topic (or people) on a page. Things like team bios, conference talks, or product details can be shown in a modal to provide more information without navigating away from the page. One click to open, and another that will take you right back to where you left off.

For this example, we’ll be creating a modal for a simple contact form. This won’t cover the details about adding content to the modal, so it doesn’t have to be a form. Our design, however, will looks like this:

Modal showing a simple contact form and a button to close it

First, create a modal wrapper

The wrapper is where all of your modal content (inner divs, text, etc) will be placed. You’ll need to set it up this way in order to be able to “hide” everything later.

Steps:

• Add a div and assign the class, example: ModalWrapper.
• Set the position to fixed, and all sides to 0.
• Set the z-index to 9999 to put it on top of all elements on the page.
• Give it a height of 100VH. This will make it so that it’s always 100% of the screen’s view height. Note: if your content will extend past the height of the screen, set the Overflow to Scroll.
• Set your background color (and opacity if it needs to be transparent)

Add the ModalWrapper class and set properties

Add the content

You’ll want to add all of your modal elements inside of the wrapper div. For this example, our modal is a contact form, so we’ll include some introduction text and a simple form.

• Add a div for your container & place your content inside. Note: if you’re looking for more guidance around adding content on the page, Webflow has a great series for that here
• You’ll need a way to close the modal once it opened. This can be either an X icon or a “close” button. For this example, we’ll use a button.

Modal with a simple contact form added and a close button

Add an interaction to close it

Since we’ve got everything up on the page, we’ll work backwards from this point to set up the interactions. The first interaction will be for the close button. Interactions are found under the lightning bolt icon on the right panel (or tapping the “H” hotkey).

Add a legacy interaction:

• Open the interactions panel, and then toggle on “legacy interactions” at the top.
• Click on the + to create the interaction.

Add a Trigger:

• Select the trigger type Click
• Check the box at the top of the trigger settings for Affect different element(s). Select the ModalWrapper by typing in the search field below.
• Click on the + to add a new step for First Click
• Set the opacity to 0%, and display: none
• Click “done” to save it.

Create a closing interaction as a Legacy Interaction

Make the entire modal disappear

It’s a modal, so it should only display when you want it to be on the screen.

Hiding the modal:

• Select the layer for the ModalWrapper, and set the Display (under Layout) to be None (this is the eye icon with the slash through it)
• Now the entire modal should be hidden from view

Setting the display to none will hide the modal from view

Now, make it come back

To have your modal display (on click, on hover, or at a certain time) you’ll need to add another interaction on the page. This example modal interaction will be triggered by a button click. It’s similar to the interaction created for the close button, except this one will make it visible on click.

Add another legacy interaction:

• Give the interaction a name, example: Open Modal.

Add a Trigger:

• Select the trigger type Click
• Check the box at the top of the trigger settings for Affect different element(s). Select the ModalWrapper by typing in the search field below.
• Click on the + to add a new step for First Click
• Set the opacity to 0%, and display: none
• Click “done” to save.

Adding an open interaction (similar steps as the closing interaction)

Apply the opening interaction to the page

Both the closing & opening interactions can now be applied to any areas of the page. Select the elements from the Navigator panel that will open the modal. With the legacy interactions visible in the right panel, select the Open Modal interaction from the list to apply it.

Select elements from the navigator panel and apply the interaction

That’s it. Since the interactions are set up as a legacy style, you can reuse them across the entire project. Once you get the hang of Webflow interactions, you can explore more advanced settings to customize transitions for the elements inside of your modal. But for now we’ve got a quick, easy way to access a contact form for our site.