Passer au contenu principal Passer à la navigation Aller à la recherche Passer au pied de page

Modals & Overlays

Modal dialogs, lightboxes, and overlay components powered by sparkles-modal.js

🎭 Component Demonstrations

Interactive demos of all modal and overlay components

Basic Modals

Standard modal patterns for confirmations, alerts, and basic dialogs

Modal Title

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

Are you sure?

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

Success!

Your changes have been saved successfully.

Modal Sizes

Different modal sizes for various content needs

Small Modal

This is a small modal dialog.

Medium Modal

This is a medium modal dialog.

Large Modal

This is a large modal dialog.

Fullscreen Modal

This modal takes up the entire viewport.

Advanced Modals

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

Sample lightbox image
Beautiful landscape photo - Click backdrop or press ESC to close

Product Demo Video

Contact Us

Quick View - Premium T-Shirt

Product

Premium Cotton T-Shirt

$29.99

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

Size

Loading Overlays

Loading states with spinners, progress bars, and custom messages

Processing your request...

Notification Modals

Toast notifications and alert banners for user feedback

New feature available! Check out our latest updates.

Cart Drawer Overlay

Slide-out cart drawer with product management capabilities

Shopping Cart

Total: $179.97

📝 Usage Examples

<div x-data="{ showModal: false }">
  <button @click="showModal = true" class="sparkles-btn sparkles-btn-primary">
    Open Modal
  </button>
  
  <div x-show="showModal" x-trap.noscroll.inert="showModal" class="sparkles-overlay">
    <div class="sparkles-overlay-backdrop" @click="showModal = false"></div>
    <div class="sparkles-overlay-content">
      <div class="sparkles-modal sparkles-modal-md">
        <div class="sparkles-modal-header">
          <h3 class="sparkles-modal-title">Modal Title</h3>
          <button @click="showModal = false" class="sparkles-modal-close">×</button>
        </div>
        <div class="sparkles-modal-body">
          Modal content goes here...
        </div>
      </div>
    </div>
  </div>
</div>
<div class="sparkles-modal sparkles-modal-sm sparkles-modal-confirm">
  <div class="sparkles-modal-icon sparkles-modal-icon-warning">
    <!-- Warning icon SVG -->
  </div>
  <div class="sparkles-modal-body text-center">
    <h3>Are you sure?</h3>
    <p>This action cannot be undone.</p>
  </div>
  <div class="sparkles-modal-footer sparkles-modal-footer-centered">
    <button class="sparkles-btn sparkles-btn-secondary">Cancel</button>
    <button class="sparkles-btn sparkles-btn-danger">Delete</button>
  </div>
</div>
<div x-show="loading" class="sparkles-overlay sparkles-overlay-loading">
  <div class="sparkles-overlay-backdrop"></div>
  <div class="sparkles-overlay-content">
    <div class="sparkles-loading-spinner">
      <div class="sparkles-spinner-base sparkles-spinner-md"></div>
    </div>
  </div>
</div>

⚡ Performance & Accessibility

Modal Best Practices

  • ♿ 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