How to add an attribute:

close icon
Hey! Give us some feedback here.
Components

Modal

Create accessible modal popups easily on Webflow.

Modal

Webflow Libraries component

Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
Modal
I want this
div block icon

Div Block

to be the element that shows and hides (the modal wrapper).
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-modal-element
copy icon
Value
modal
copy icon
Outermost wrapper of the modal popup.

This element shows and hides with the open and close triggers.

This modal element receives display: flex as an inline style when the open trigger is clicked.

This modal element receives inline style display: none when the close trigger is clicked.

If using more than one modal on the page, use modal instances. For example fs-modal-element = modal-2.
navigator arrow
Open
I want this
div block icon

Webflow element

to open the modal popup when clicked.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-modal-element
copy icon
Value
open
copy icon
This element opens the modal.

It can be placed on multiple elements to create multiple open triggers.

If using more than one modal on the page, use modal instances. For example fs-modal-element = open-2.
navigator arrow
Close
I want this
div block icon

Webflow element

to close the modal popup when clicked.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-modal-element
copy icon
Value
close
copy icon
This element closes the modal.

It can be placed on multiple elements to create multiple close triggers.

If using more than one modal on the page, use modal instances. For example fs-modal-element = close-2.
navigator arrow

Option

Override display
Override the default CSS flex style applied to the modal element when opened
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-modal-display
copy icon
Value
flex
copy icon
Use a different CSS display value for an open modal.

The default display value is flex. This attribute is not required if you want to use flex layout for the opened modal element.

Value options: block | inline |  inline-block | flex | inline-flex | grid | inline-grid | none | contents
Where?
Add to the element with fs-modal-element = "modal"

Animation and effects

Choose options for visual effects. Animation options can be set to the modal, or any elements inside the modal.

navigator arrow

Option

Animation
The animation that is used when the modal opens and closes.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-modal-animation
copy icon
Value
fade
copy icon
Customize the animation effect of the modal when opened and closed.

This attribute can be added to the modal element — or any element inside the modal.

For example, the modal element can be set to fade, the "content wrapper" can be set to grow, and the close button can be set to slide-up.

If no animation is set, the default value is fade.

Value options: fade, slide-up, slide-down, slide-right, slide-left, grow, shrink, spin
Where?
Add to the element with fs-modal-element = "modal" and/or any element nested inside.
navigator arrow

Option

Easing
The easing of the animation that is used when the modal opens and closes.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-modal-easing
copy icon
Value
ease
copy icon
This option customizes the easing of the animation effect of the loaded content.

Value options: linear, ease, ease-in, ease-out, ease-in-out

This attribute can be added to the modal element — or any element inside the modal.

For example, the modal element can be set to ease-out, the "content wrapper" can be set to ease, and the close button can be set to ease-in-out. All children elements of the modal that do not have a custom easing applied will inherit the easing set on the modal.

If no easing is set, the default easing is ease.
Where?
Add to the element with fs-modal-element = "modal" and/or any element nested inside.
navigator arrow

Option

Duration
The duration of the animation that is used when the modal opens and closes.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-modal-duration
copy icon
Value
200
copy icon
This option customizes the duration of the animation effect of the loaded content.

This attribute can be added to the modal element — or any element inside the modal.

For example, the modal element can be set to 200, the "content wrapper" can be set to 400, and the close button can be set to 550. All children elements of the modal that do not have a custom duration applied will inherit the duration set on the modal.

If no duration is set, the default duration is 300 (milliseconds).
Where?
Add to the element with fs-modal-element = "modal" and/or any element nested inside.

Working examples

See this solution working live in this Webflow project.

Example 1
Modal 1 - IX2
Copy and paste this example inside Webflow Libraries
Go to Webflow Libraries
Example 2
Modal 2 - JS
Open Modal
Copy and paste this example inside Webflow Libraries
Go to Webflow Libraries

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.