Modals

Add overlays that hold a visitor's attention until they finish or close them.

A modal is an element that opens on top of your page and keeps the visitor focused on it until they close it. Use modals for signup forms, confirmations, and important messages. Modals use the browser's native <dialog> element, so focus handling and keyboard support are built in, and published modals open and close without Webflow JavaScript, unless you animate them.

Understand how modals work

A modal has two parts: the modal element that holds your content, and a button that opens it. You connect the two from the button's Link settings, so you don't need to write any code.

When a modal is open:

• The page behind it is blocked — visitors can't click anything outside the modal
• Focus stays inside — pressing Tab moves through the modal's content and doesn't escape to the page behind it
• Escape closes it — visitors can press Escape to close the modal
• Clicking outside doesn't close it — visitors must use a close button or press Escape

Add a modal

To add a modal to your page:

1. Open the Add panel
2. Scroll down to Advanced
3. Drag a Modal element onto the canvas
4. Add your content inside the modal, such as text, images, or a form
5. Give the modal a descriptive name in the Navigator

You can also turn an existing Box element into a modal. Right-click the Box, click Convert to and choose Modal.

To show or hide the modal while you build, select it, then click Show on canvas or Hide on canvas in the toolbar.

Add a close button

Modals don't include a close button by default, so every modal needs one you add yourself.

1. Add a Button element inside the modal
2. Select the button
3. Open the Settings panel
4. Under Link settings, choose Modal
5. Choose the modal you want to close
6. Choose the Hide action

Open a modal from a button

To connect a button to a modal:

1. Select the button
2. Open the Settings panel
3. Under Link settings, choose Modal
4. Choose the modal you want to open
5. Choose the Show action

Modals support Show and Hide. They don't support Toggle.

You can add as many buttons as you want, and they can all open the same modal. For example, you can use a button in your hero section and another in your footer.

Learn more about Link settings.

Close a modal after a form submits

If your modal holds a form, you can close the modal when a visitor submits it.

1. Select the form
2. Open the Settings panel
3. Check Close modal after submit

Lock scrolling behind a modal

By default, visitors can still scroll the page behind an open modal. To stop that, select the modal, open the Settings panel, then go to Modal settings and check Lock scrolling while open.

Test a modal

To test a modal, open Preview, then click the button that opens it. Preview runs the same native behavior as your published site, including pressing Escape to close the modal.

Style a modal

Style a modal in the Style panel like any other element. To style the area behind the modal, open the Element states menu in the States section, then choose Backdrop. For example, add a backdrop filter to draw more focus to the modal.

Animate a modal

You can animate a modal opening and closing with a one-click interaction. To add one, select the modal, open the Settings panel, go to Modal settings, then click Animate open/close. This adds a fade for the modal and its backdrop that you can customize.

To build your own animation instead:

1. Select the modal
2. Click the Interactions tab
3. Under Trigger on..., choose Modal toggle
4. Next to Open actions, click +
5. Choose an action or an animation preset, like Fade in

To animate the modal closing, repeat steps four and five next to Close actions.

Learn more about triggers and targets in Interactions with GSAP.

Make a modal accessible

Give each modal an accessible name so screen readers can announce it. To add one, select the modal, open the Settings panel, then go to Custom attributes. Click + next to Attributes and add an aria-label attribute with a short description of the modal, like "Newsletter signup".

Understand limitations

• Only a Button element can open a modal
• Modals have no Toggle action, no default close button, and no default content
• Clicking the backdrop doesn't close a modal
• A modal's ID can't be changed
• Hover triggers aren't native. To open a modal on hover, use an IX3 hover trigger
• If you duplicate an element that holds both a button and its modal, the new button still opens the original modal. To fix this, select the copied button, then choose the copied modal in Link settings

Choose between a modal and a popover

Use a modal when visitors need to deal with something before they move on, like a signup form, a confirmation, or an important message. Use a popover when visitors need to keep working with the page behind it.

Learn more about Popovers.