Basic Modal

A basic modal dialog with proper backdrop styling and accessibility features.

Basic Modal

This is a basic modal dialog. The backdrop should be visible behind this modal.

Notice how the backdrop darkens the background content and provides a visual separation.

Small Modal

A smaller modal variant for simple confirmations and alerts.

Confirm Action

Are you sure you want to proceed?

Large Modal

A larger modal for more complex content and forms.

Large Modal

This is a large modal with more space for complex content.

Placeholder content area

You can include forms, images, or other complex layouts in this larger space.

Fullscreen Modal

A fullscreen modal that takes up the entire viewport.

Fullscreen Modal

This modal takes up the entire viewport, useful for detailed forms or image galleries.

Full-size content area

Fullscreen modals are great for immersive experiences or when you need maximum space.

Simple Modal

A minimal modal without header or footer sections.

Simple Notification

This is a simple modal with just content and a close button.

Perfect for notifications, alerts, or minimal content display.

Backdrop Testing

Test the modal backdrop behavior and styling across different browsers.

What to test:

Backdrop Test

Try these tests:

  1. Click outside this modal (on the backdrop) - it should close
  2. Press the ESC key - it should close
  3. Tab through the modal - focus should stay within
  4. Check that the backdrop is semi-transparent

If any of these don't work, there may be browser compatibility issues.

HTML Structure

Here's the basic HTML structure for modals:

<dialog class="modal">
  <header class="header">
    <h3 class="headline">Modal Title</h3>
    <button class="control close" aria-label="Close">×</button>
  </header>
  <div class="content">
    Modal content goes here
  </div>
  <footer class="footer">
    <button class="btn">Cancel</button>
    <button class="btn primary">OK</button>
  </footer>
</dialog>

Auto-Opening Modals

Modals can automatically open when the page loads using data attributes.

Examples

Immediate auto-open:

<dialog class="modal" data-modal-auto-open="true">
  <div class="content">This opens immediately</div>
</dialog>

Delayed auto-open:

<dialog class="modal" data-modal-auto-open="true" data-modal-auto-open-delay="3000">
  <div class="content">This opens after 3 seconds</div>
</dialog>

Auto-Open Test

This modal was opened automatically for testing purposes.

In a real application, auto-open modals are useful for:

  • Welcome messages
  • Important announcements
  • Cookie consent notices
  • Newsletter signups

Delayed Auto-Open

This modal opens after a 2-second delay.

Delayed auto-open is useful for:

  • Exit-intent messages
  • Time-based offers
  • Onboarding hints
  • Help tooltips

JavaScript Usage

Initialize modals with the service:

import { initModals, createModal } from '@/modal/scripts/services/modal'

// Initialize all modals on the page (includes auto-open functionality)
initModals()

// Create a modal with auto-open programmatically
const modal = createModal('#my-modal', {
  backdropClose: true,
  escapeClose: true,
  autoOpen: true,          // Auto-open on initialization
  autoOpenDelay: 3000,     // Delay in milliseconds (optional)
  onOpen: (element) => console.log('Modal opened'),
  onClose: (element) => console.log('Modal closed')
})

// Programmatic control
modal.openModal()
modal.close()