Skip to main content

🎭 Modal System Showcase

Accessible, responsive modals for dialogs, e-commerce flows, and mobile experiences

5 Sizes
6 Variants
3 Animations
♿ WCAG 2.1

🚀 Try Different Modal Types

Click to experience various modal implementations

Modal Sizes

Choose the right size for your content

Small (300px)

Perfect for alerts and confirmations

Default (500px)

Standard dialogs and forms

Large (800px)

Product views and galleries

Extra Large (1140px)

Complex forms and tables

Full Screen

Immersive experiences

Modal Variants

Different styles for different use cases

Alert Modal

Simple notifications

Image Modal

Lightbox for galleries

Drawer (Right)

Shopping cart sidebar

Drawer (Left)

Navigation menu

Bottom Sheet

Mobile-friendly actions

E-commerce Modal Flows

Complete shopping experiences

Product Quick View

View products without leaving the page

Interactive Gallery

Multi-Step Checkout

Guided checkout process

3 Steps Validation

Shopping Cart

Review and edit cart items

Drawer Live Updates

Size Guide

Interactive size charts

Tables Help

Mobile-Optimized Experience

Perfect modals for touch devices

Mobile Shopping App

Tap buttons to see mobile-optimized modals

Performance & Features

<100ms
Open Time
60 FPS
Animation
0 CLS
Layout Shift
A11y
WCAG 2.1 AA

Key Features

🎯 Focus Management

Automatic focus trapping and restoration

⌨️ Keyboard Support

Tab navigation and ESC to close

📱 Touch Gestures

Swipe to dismiss on mobile

🎨 Smooth Animations

Hardware-accelerated transitions

♿ Screen Readers

Full ARIA support and announcements

🔒 Scroll Lock

Prevents body scroll when open

Implementation

HTML Structure

<div id="myModal" class="aiab-modal" aria-hidden="true"> <div class="aiab-modal__dialog"> <div class="aiab-modal__header"> <h3 class="aiab-modal__title">Modal Title</h3> <button class="aiab-modal__close">×</button> </div> <div class="aiab-modal__body"> </div> <div class="aiab-modal__footer"> <button data-modal-close>Cancel</button> <button data-modal-confirm>Confirm</button> </div> </div> </div>

JavaScript API

// Create modal instance const modal = amp.createModal('product', '#productModal', { size: 'lg', variant: 'default', closeOnBackdrop: true, closeOnEscape: true, onOpen: () => console.log('Modal opened'), onClose: () => console.log('Modal closed') }); // Control modal modal.open(); modal.close(); modal.toggle(); // Alert & Confirm utilities await amp.alert('Success!', 'success'); const confirmed = await amp.confirm('Are you sure?');