@midkard/modal

A lightweight, flexible modal library built on top of the native HTML <dialog> element. Part of the DNT WordPress theme.

Features

• Native HTML Dialog — Built on the standard <dialog> element for accessibility and semantic correctness
• TypeScript Support — Fully typed with extensible interfaces
• Multiple Modal Types — Standard dialogs, offcanvas (left/right), bottom sheets, and fullscreen modals
• CSS Animations — Smooth transitions with @starting-style and allow-discrete support
• Event System — Custom events for show/shown/close/closed lifecycle
• Lightweight — Minimal JavaScript with no external dependencies
• Accessible — ARIA attributes and keyboard navigation support

Installation

npm install @midkard/modal

Usage

Basic Example

<!-- Trigger button -->
<button data-dnt-control="#my-modal">Open Modal</button>

<!-- Modal dialog -->
<dialog id="my-modal" class="modal" aria-label="My Modal">
  <article>
    <p>Modal content goes here...</p>
  </article>
  <button data-dnt-dismiss="modal">Close</button>
</dialog>

import '@midkard/modal';
import '@midkard/modal/style';

Modal Types

Standard Modal (Centered)

<dialog class="modal" id="modal-standard">
  <article>Content</article>
</dialog>

Left Offcanvas

<dialog class="modal modal_start" id="menu-offcanvas">
  <article>Menu content</article>
</dialog>

Right Offcanvas

<dialog class="modal modal_end" id="sidebar">
  <article>Sidebar content</article>
</dialog>

Bottom Sheet

<dialog class="modal modal_bottom" id="bottom-sheet">
  <article>Bottom content</article>
</dialog>

Fullscreen

<dialog class="modal modal_fullscreen" id="modal-full">
  <article>Fullscreen content</article>
</dialog>

Data Attributes

Attribute	Description
data-dnt-control	Opens/toggles the target modal (value: CSS selector)
data-dnt-dismiss	Closes the modal when clicked
data-dnt-backdrop	Set to "false" to disable backdrop click-to-close

Events

Event	Description
modal.dnt.show	Fired when modal starts opening
modal.dnt.shown	Fired when modal open animation completes
modal.dnt.close	Fired when modal starts closing
modal.dnt.closed	Fired when modal close animation completes

const modal = document.querySelector('#my-modal');

modal.addEventListener('modal.dnt.show', (e) => {
  console.log('Modal is opening');
});

modal.addEventListener('modal.dnt.shown', (e) => {
  console.log('Modal is now visible');
});

Programmatic API

import { dntModals } from '@midkard/modal';

const modal = dntModals.getOrCreateInstance(document.querySelector('#my-modal'));

// Show modal
modal.show();

// Hide modal
modal.hide();

// Toggle modal
modal.toggle();

// Destroy instance
modal.destroy();

CSS Variables

Customize the modal appearance using CSS variables:

.modal {
  --duration: 0.15s;      /* Animation duration */
  --padding-y: 1rem;      /* Horizontal padding */
  --border-raius: 0.5rem; /* Border radius */
  --color: inherit;       /* Text color */
  --bg: white;            /* Background color */
}

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Run linter
npm run lint

# Format code
npm run format

Browser Support

Requires browsers that support:

• HTML <dialog> element
• CSS @starting-style at-rule
• CSS allow-discrete keyword

License

MIT © Dimenius Novus