Webflow Libraries component
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.
Div Block
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.
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.
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.
Option
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
Animation and effects
Choose options for visual effects. Animation options can be set to the modal, or any elements inside the modal.
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
Option
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.
Option
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).
You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.
Example of this solution:
Working examples
See this solution working live in this Webflow project.
Welcome to Finsweet's accessible modal component for Webflow Libraries. This modal uses Webflow Interactions to open and close. It is accessible through custom attributes and custom JavaScript added in the embed block of the component. If you're interested in how this is built, check out the Attributes documentation page for this modal component.
See docsAccessible popup
Welcome to Finsweet's accessible modal component for Webflow Libraries. This modal uses custom code to open and close. It is accessible through custom attributes and custom JavaScript added in the embed block of the component. If you're interested in how this is built, check out the Attributes documentation page for this modal component.
See docsDeveloper documentation
Next time implement inside Webflow
