Modal

Modals (dialogs) are overlay windows that focus user attention on specific content or actions.

Usage

Use modals for important interactions that require user attention, such as confirmations, forms, or detailed information.

Basic Modal

Modal Title

This is the modal content. You can add any content here including forms, images, or complex layouts.

<div class="df-modal-backdrop"></div>
<div class="df-modal">
  <div class="df-modal__header">
    <h3 class="df-modal__title">Modal Title</h3>
    <button class="df-modal__close" aria-label="Close">
      <svg><!-- close icon --></svg>
    </button>
  </div>
  <div class="df-modal__body">
    <p>Modal content here.</p>
  </div>
  <div class="df-modal__footer">
    <button class="df-button df-button--ghost">Cancel</button>
    <button class="df-button df-button--primary">Save Changes</button>
  </div>
</div>

Sizes

Small

Small Modal

Perfect for simple confirmations.

Large

Large Modal

Large modals are great for complex forms or detailed content that needs more space to breathe.

Confirmation Modal

Delete Item?

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

<div class="df-modal df-modal--sm">
  <div class="df-modal__body" style="text-align: center;">
    <div class="df-modal__icon df-modal__icon--warning">
      <svg><!-- warning icon --></svg>
    </div>
    <h3 class="df-modal__title">Delete Item?</h3>
    <p>This action cannot be undone.</p>
  </div>
  <div class="df-modal__footer">
    <button class="df-button df-button--ghost">Cancel</button>
    <button class="df-button df-button--error">Delete</button>
  </div>
</div>

With Form

Create Account

Full Name

Email

Password

Scrollable Content

For modals with long content, the body becomes scrollable while the header and footer remain fixed.

<div class="df-modal">
  <div class="df-modal__header">...</div>
  <div class="df-modal__body df-modal__body--scrollable">
    <!-- Long content here -->
  </div>
  <div class="df-modal__footer">...</div>
</div>

JavaScript Usage

import { Modal } from '@everforth/design-system';

// Initialize
const modal = new Modal('#my-modal');

// Open
modal.open();

// Close
modal.close();

// Events
modal.on('open', () => console.log('Modal opened'));
modal.on('close', () => console.log('Modal closed'));

Accessibility

• Use role="dialog" and aria-modal="true"
• Set aria-labelledby to reference the modal title
• Trap focus within the modal while open
• Return focus to trigger element on close
• Close on Escape key press

Best Practices

• Keep modals focused on a single task
• Provide clear actions and exit options
• Avoid nested modals
• Use appropriate sizes for content
• Consider mobile viewports

API Reference

Classes

Class	Description
df-modal	Base modal class
df-modal--sm	Small size (400px)
df-modal--lg	Large size (800px)
df-modal-backdrop	Background overlay
df-modal__header	Modal header
df-modal__title	Modal title
df-modal__close	Close button
df-modal__body	Modal content area
df-modal__body--scrollable	Scrollable content
df-modal__footer	Modal footer/actions

JavaScript API

Method	Description
open()	Opens the modal
close()	Closes the modal
toggle()	Toggles modal state
on(event, callback)	Listens for events

Event	Description
open	Fired when modal opens
close	Fired when modal closes