AttRibutes
Modal
What is this page about?

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.

This Acessible Component is part of our Webflow Marketplace Library
Check out our free library
Open in Webflow

Modal • Flash Card

Copy Script

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.

fs-modal-element
=
"
modal
"

Open

This element opens the modal.

fs-modal-element
=
"
open
"

Close

This element closes the modal.

fs-modal-element
=
"
close
"

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

fs-modal-display
=
"
CSS_VALUE
"

Animation

Add to modal element or any nested element.

Value options: fade | slide-up | slide-down | slide-right | slide-left | grow | shrink | spin

fs-modal-animation
=
"
CSS_VALUE
"

Easing

Add to modal element or any nested element.

Defaults to ease. Value options: linear | ease | ease-in | ease-out | ease-in-out

fs-modal-easing
=
"
CSS_VALUE
"

Duration

Add to the modal element or any nested element.

Deafults to 300

fs-modal-duration
=
"
TIME-IN-MS
"
1

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>

Copy Script
2

Add these required attributes to the elements

Modal

Defines the modal wrapper element
fs-modal-element
=
"
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.

Add this attribute:
Name
fs-modal-element
Copy
Value
modal
Copy
Elements allowed:
Div Block
WHERE TO ADD IT

Open

Triggers the opening of the modal
fs-modal-element
=
"
open
"

This element opens the modal. It can be placed on multiple elements to create multiple open triggers.

Add this attribute:
Name
fs-modal-element
Copy
Value
open
Copy
Elements allowed:
Any element
WHERE TO ADD IT

Close

Triggers the closing of the modal
fs-modal-element
=
"
close
"

This element opens the modal. It can be placed on multiple elements to create multiple open triggers.

Add this attribute:
Name
fs-modal-element
Copy
Value
close
Copy
Elements allowed:
Any element
WHERE TO ADD IT
Optional

Add options

Override display

Override the default CSS style applied to the modal element when opened
fs-modal-display
=
"
VALUE
"
Values allowed
Flex
Block
Inline
Inline Block
Inline Flex
Grid
Inline Grid
None
Contents

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.

Add this attribute:
Name
fs-modal-display
Copy
Value
flex
Copy
Default:
fs-modal-display = "flex"
Add it to a any element with
fs-modal-element = "modal"

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.

Add this attribute:
Name
fs-modal-display
Copy
Value
block
Copy
Default:
fs-modal-display = "flex"
Add it to a any element with
fs-modal-element = "modal"

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.

Add this attribute:
Name
fs-modal-display
Copy
Value
inline
Copy
Default:
fs-modal-display = "flex"
Add it to a any element with
fs-modal-element = "modal"

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.

Add this attribute:
Name
fs-modal-display
Copy
Value
inline-block
Copy
Default:
fs-modal-display = "flex"
Add it to a any element with
fs-modal-element = "modal"

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.

Add this attribute:
Name
fs-modal-display
Copy
Value
inline-flex
Copy
Default:
fs-modal-display = "flex"
Add it to a any element with
fs-modal-element = "modal"

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.

Add this attribute:
Name
fs-modal-display
Copy
Value
grid
Copy
Default:
fs-modal-display = "flex"
Add it to a any element with
fs-modal-element = "modal"

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.

Add this attribute:
Name
fs-modal-display
Copy
Value
inline-grid
Copy
Default:
fs-modal-display = "flex"
Add it to a any element with
fs-modal-element = "modal"

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.

Add this attribute:
Name
fs-modal-display
Copy
Value
none
Copy
Default:
fs-modal-display = "flex"
Add it to a any element with
fs-modal-element = "modal"

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.

Add this attribute:
Name
fs-modal-display
Copy
Value
contents
Copy
Default:
fs-modal-display = "flex"
Add it to a any element with
fs-modal-element = "modal"

Animation

Defines the animation type when the modal is opened and closed
fs-modal-animation
=
"
VALUE
"
Values allowed
Fade
Slide up
Slide down
Slide right
Slide left
Grow
Shrink
Spin

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.

Add this attribute:
Name
fs-modal-animation
Copy
Value
fade
Copy
Default:
fs-modal-animation = "fade"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-animation
Copy
Value
slide-up
Copy
Default:
fs-modal-animation = "fade"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-animation
Copy
Value
slide-down
Copy
Default:
fs-modal-animation = "fade"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-animation
Copy
Value
slide-right
Copy
Default:
fs-modal-animation = "fade"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-animation
Copy
Value
slide-left
Copy
Default:
fs-modal-animation = "fade"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-animation
Copy
Value
grow
Copy
Default:
fs-modal-animation = "fade"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-animation
Copy
Value
shrink
Copy
Default:
fs-modal-animation = "fade"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-animation
Copy
Value
spin
Copy
Default:
fs-modal-animation = "fade"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

Easing

Defines easing of the animation when the modal is opened or closed
fs-modal-easing
=
"
VALUE
"
Values allowed
Ease
Linear
Ease-in
Ease-out
Ease-in-out

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.

Add this attribute:
Name
fs-modal-easing
Copy
Value
ease
Copy
Default:
fs-modal-easing = "ease"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-easing
Copy
Value
linear
Copy
Default:
fs-modal-easing = "ease"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-easing
Copy
Value
ease-in
Copy
Default:
fs-list-easing = "linear"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-easing
Copy
Value
ease-out
Copy
Default:
fs-list-easing = "linear"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

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.

Add this attribute:
Name
fs-modal-easing
Copy
Value
ease-in-out
Copy
Default:
fs-modal-easing = "linear"
Add it to a any element with
fs-modal-element = "modal"
Or any element nested inside

Duration

Defines the duration of the animation when the modal opens and closes
fs-modal-duration
=
"
TIME-IN-MS
"

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.

Add this attribute:
Name
fs-modal-duration
Copy
Value
TIME-IN-MS
Copy
Default:
fs-modal-duration = "300"
Elements allowed:
fs-modal-element = "modal"
Or any element nested inside
3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-modal-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-modal-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-modal-instance = "1"
fs-modal-instance = "2"
fs-modal-instance = "ad"
fs-modal-instance = "subscribe"
Learn more ways to set up multiple instances and how it works