Modals & Overlays

Modal dialogs, lightboxes, and overlay components powered by the showcase modal script

🎭 Component Demonstrations

Interactive demos of all modal and overlay components

Standard modal patterns for confirmations, alerts, and basic dialogs

This is a standard modal dialog with header, body, and footer sections.

This action cannot be undone. This will permanently delete the item.

Your changes have been saved successfully.

Different modal sizes for various content needs

This is a small modal dialog.

This is a medium modal dialog.

This is a large modal dialog.

This modal takes up the entire viewport.

Complex modal patterns including lightboxes, forms, and product quick views

Beautiful landscape photo - Click backdrop or press ESC to close

Name

Message

$29.99

High-quality cotton t-shirt perfect for everyday wear. Comfortable fit with premium materials.

Loading states with spinners, progress bars, and custom messages

Processing your request...

♿ Modal accessibility: Focus management with x-trap, ARIA attributes, and ESC key handling
⚡ Performance optimization: Lazy rendering with x-show and smooth CSS transitions
📱 Mobile-friendly overlays and drawers with touch-optimized close areas and responsive sizing
🔒 Scroll locking with .noscroll and focus trapping with .inert for better UX