SuperModal

Accessible modal dialogs with focus trapping, keyboard navigation, and smooth animations. WCAG 2.1 compliant out of the box. Zero JavaScript to configure.

Focus Trap ARIA Labels Keyboard Nav Animations

View Full Documentation

What Makes It Super

Focus Management

Automatic focus trap keeps keyboard navigation inside the modal. Returns focus to trigger element on close.

<div data-az-component="super-modal"
     data-az-focus-trap="true"
     data-az-restore-focus="true">

Backdrop Options

Blur, dim, or custom backdrop effects. Click-outside-to-close with optional prevention for unsaved changes.

<div data-az-backdrop="blur"
     data-az-close-on-backdrop="true"
     data-az-prevent-close-dirty="true">

Flexible Sizing

Preset sizes (sm, md, lg, xl, full) or custom dimensions. Auto-scroll for content overflow with sticky headers.

<div data-az-size="lg"
     data-az-max-height="80vh"
     data-az-scrollable="true">

Animation Presets

Slide, fade, zoom, or custom keyframe animations. Configurable duration and easing curves.

<div data-az-animation="slide-up"
     data-az-duration="300"
     data-az-easing="ease-out">

Stacking Support

Multiple modals can stack with automatic z-index management. LIFO close order with Escape key.

<div data-az-stackable="true"
     data-az-stack-offset="20"
     data-az-close-on-escape="true">

HTMX Content Loading

Load modal content from server via HTMX. Show loading states and handle errors gracefully.

<div data-az-content-url="/modal/user/1"
     data-az-loading="skeleton"
     hx-get="/modal/user/1">

Trigger Patterns

Multiple ways to open modals—buttons, links, or programmatic triggers—all declaratively configured.

<!-- Button Trigger -->
<button data-az-modal-trigger="user-modal">
  Open Modal
</button>

<!-- Link Trigger with HTMX -->
<a href="/users/1/edit" 
   data-az-modal-trigger="edit-modal"
   data-az-modal-content="htmx">
  Edit User
</a>

<!-- Modal Definition -->
<div data-az-component="super-modal"
     data-az-modal-id="user-modal"
     data-az-size="lg"
     data-az-backdrop="blur"
     data-az-animation="slide-up"
     role="dialog"
     aria-modal="true"
     aria-labelledby="modal-title">
  
  <header data-az-modal-header="true">
    <h2 id="modal-title">User Details</h2>
    <button data-az-modal-close="true" aria-label="Close">×</button>
  </header>
  
  <div data-az-modal-body="true">
    <!-- Content -->
  </div>
  
  <footer data-az-modal-footer="true">
    <button data-az-modal-close="true">Cancel</button>
    <button data-az-modal-confirm="true">Save</button>
  </footer>
  
</div>

Ready for Accessible Modals?

SuperModal is part of AZ UI Kit. Request a briefing to learn more.

SOLICITAR BRIEFING Back to AZ UI Kit