Skip to main content

Search

Modal Component Breakdown

Overview

The dd-modal component provides a dialog-based modal window for displaying content overlays. It uses the native HTML5 dialog element for built-in accessibility and focus management, ensuring it works progressively with or without JavaScript enhancements.

This component is ideal for alerts, forms, confirmations, or additional content displays. In WordPress, configure it via ACF fields for modal triggers and content. In Drupal, use Paragraphs with fields for button text, modal content, and IDs.

Basic Usage

Use buttons with data-modal-open and data-id attributes to open modals. The modal itself uses dialog with data-modal and a matching id. Include a close button with data-modal-close and data-id inside the modal.

Preview

Modal content here.

Code

<button data-modal-open data-id="example-modal">Open Modal</button>
<dialog data-modal id="example-modal" class="dd-modal">
  <button data-modal-close data-id="example-modal" aria-label="close modal window">X</button>
  <div class="dd-modal__content">
    <p>Modal content here.</p>
  </div>
</dialog>

CSS Modifiers

Base styles for the modal include backdrop blur, centering, and responsive sizing.

  • [open]: Applied when the dialog is open, for styling the backdrop and modal.

Framework files

  • source/js/_dd_modal.js (animations)
  • source/scss/components/_dd_modal.scss (styles)

Accessibility and Best Practices

The dialog element provides automatic focus management and keyboard navigation (ESC to close). Ensure close buttons have proper aria-label. Test with screen readers. In CMS, ensure modal content is meaningful and avoid nesting interactive elements.