Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.
Modal
Create accessible modal popups easily on Webflow.
Modal • Flash Card
For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.
Required attributes
Modal
Outermost wrapper of the modal popup.
Open
This element opens the modal.
Close
This element closes the modal.
Optional attributes
Override display
Add to the modal element to change its display options.
Defaults to flex. Value options: block | inline | inline-block | flex | inline-flex | grid | inline-grid | none | contents
Animation
Add to modal element or any nested element.
Value options: fade | slide-up | slide-down | slide-right | slide-left | grow | shrink | spin
Easing
Add to modal element or any nested element.
Defaults to ease. Value options: linear | ease | ease-in | ease-out | ease-in-out
Duration
Add to the modal element or any nested element.
Deafults to 300
Add this <script> inside the <head> tag of your page or project
This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-modal
></script>
Add these required attributes to the elements
Modal
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.
Open
This element opens the modal. It can be placed on multiple elements to create multiple open triggers.
Close
This element opens the modal. It can be placed on multiple elements to create multiple open triggers.
Add options
Override display
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.
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.
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.
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.
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.
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.
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.
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.
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.
Animation
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.
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.
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.
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.
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.
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.
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.
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.
Easing
This option customizes the easing 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 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.
This option customizes the easing 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 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.
This option customizes the easing 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 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.
This option customizes the easing 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 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.
This option customizes the easing 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 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.
Duration
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.
Publish your project! Done, easy right?
Add more
Instances
Define an instance on a common parent wrapper

If you wish to create multiple instances of this solution on the same page, please follow the steps below:
- Select a wrapper parent that contains all the elements of an instance.
- Add an
-instance
attribute to it, with a unique value. - Repeat for every instance.