Modal

Create accessible modal popups easily on Webflow

The fs-modal attribute creates accessible modal popups with animations, focus trapping, and keyboard navigation support.

Overview

Modal provides a complete solution for creating accessible popup dialogs in Webflow. It includes:

• Accessible ARIA attributes and focus management
• Customizable animations with multiple presets
• Open and close triggers
• Keyboard navigation (ESC to close)
• Focus trap to keep users within the modal

Basic Usage

Modal Structure

Create a modal with open and close triggers:

Basic Modal

<!-- Modal Element -->
<div fs-modal="modal" fs-modal-animation="fade" fs-modal-duration="300">
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Modal content goes here.</p>
    
    <!-- Close Button -->
    <button fs-modal="close">Close</button>
  </div>
</div>

<!-- Open Trigger -->
<button fs-modal="open">Open Modal</button>

The modal element should be hidden by default using CSS (display: none). The attribute will handle showing and hiding with animations.

Attribute Reference

Element Attributes

Attribute	Value	Description
fs-modal	modal	Defines the modal container element
fs-modal	open	Defines a trigger that opens the modal
fs-modal	close	Defines a trigger that closes the modal

Settings Attributes

Attribute	Values	Default	Description
fs-modal-animation	fade, slide-up, slide-down, slide-left, slide-right, grow, shrink, spin	-	Animation type for showing/hiding
fs-modal-easing	linear, ease, ease-in, ease-out, ease-in-out	-	Easing function for animation
fs-modal-duration	Number (milliseconds)	-	Duration of the animation
fs-modal-display	block, inline, flex, grid, inline-block, inline-flex, inline-grid, contents, none	flex	CSS display property after animation

Animation Options

Fade

Smoothly fades the modal in and out.

<div fs-modal="modal" fs-modal-animation="fade" fs-modal-duration="300">
  <!-- Modal content -->
</div>

Slide

Slides the modal from the specified direction (slide-up, slide-down, slide-left, slide-right).

<div fs-modal="modal" fs-modal-animation="slide-up" fs-modal-duration="400">
  <!-- Modal content -->
</div>

Scale

Grows or shrinks the modal (grow, shrink).

<div fs-modal="modal" fs-modal-animation="grow" fs-modal-duration="350">
  <!-- Modal content -->
</div>

Spin

Rotates the modal while fading in.

<div fs-modal="modal" fs-modal-animation="spin" fs-modal-duration="500">
  <!-- Modal content -->
</div>

Examples

Multiple Modals

Create multiple modals on the same page by using unique identifiers:

<!-- First Modal -->
<div fs-modal="modal" data-modal="login">
  <h2>Login</h2>
  <button fs-modal="close">Close</button>
</div>
<button fs-modal="open" data-modal="login">Login</button>

<!-- Second Modal -->
<div fs-modal="modal" data-modal="signup">
  <h2>Sign Up</h2>
  <button fs-modal="close">Close</button>
</div>
<button fs-modal="open" data-modal="signup">Sign Up</button>

Modal with Backdrop

<div 
  fs-modal="modal" 
  fs-modal-animation="fade"
  fs-modal-duration="200"
  style="display: none;"
>
  <!-- Backdrop (clicking this can close the modal) -->
  <div fs-modal="close" class="modal-backdrop"></div>
  
  <!-- Modal Content -->
  <div class="modal-content">
    <h2>Modal with Backdrop</h2>
    <p>Click outside to close.</p>
    <button fs-modal="close">Close</button>
  </div>
</div>

<button fs-modal="open">Open Modal</button>

Custom Easing and Duration

<div 
  fs-modal="modal" 
  fs-modal-animation="slide-up"
  fs-modal-easing="ease-in-out"
  fs-modal-duration="600"
  fs-modal-display="flex"
>
  <div class="modal-dialog">
    <h2>Smooth Animation</h2>
    <p>Notice the smooth, slower animation.</p>
    <button fs-modal="close">Close</button>
  </div>
</div>

<button fs-modal="open">Open Modal</button>

Accessibility Features

Focus Trapping

Keeps keyboard focus within the modal when open, preventing users from tabbing to elements behind it.

Keyboard Navigation

Press ESC to close the modal, providing an intuitive exit method.

ARIA Attributes

Automatically adds proper ARIA attributes for screen readers.

Focus Restoration

Returns focus to the trigger element when the modal closes.

The modal automatically manages focus by trapping it within the modal when open and restoring it to the trigger element when closed.

JavaScript API

Access the Modal API programmatically:

window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
  'modal',
  (modalInstances) => {
    // modalInstances contains all initialized modal elements
    console.log('Modal instances:', modalInstances);
    
    // Custom logic here
  },
]);

Make sure to include the Finsweet Attributes script before your custom JavaScript.