# makeup-dialog

> Abstract class representing the base behaviour for a modal or non-modal ARIA dialog

Latest version **0.7.0** (published 2026-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install makeup-dialog
pnpm add makeup-dialog
yarn add makeup-dialog
bun add makeup-dialog
```

## Health

**Score 55/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2026-03-31 |
| First published | 2021-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 47 |
| Author | Ian McBurnie |
| Maintainers | ianmcburnie |

## Links

- npm: https://www.npmjs.com/package/makeup-dialog
- Repository: https://github.com/makeup/makeup-js.git#master
- Homepage: https://github.com/makeup/makeup-js/tree/master#readme
- Issues: https://github.com/makeup/makeup-js/issues
- npm.io page: https://npm.io/package/makeup-dialog

## Dependencies (2)

- [makeup-modal](https://npm.io/package/makeup-modal.md) ^0.7.0
- [makeup-focusables](https://npm.io/package/makeup-focusables.md) ^0.5.0

## Recent versions

- 0.7.0 (latest) — 2026-03-31
- 0.6.0 — 2026-03-31
- 0.5.9 — 2026-02-07
- 0.5.8 — 2025-08-19
- 0.5.6 — 2025-04-22
- 0.5.4 — 2024-12-20
- 0.5.3 — 2024-10-24
- 0.5.2 — 2024-09-03
- 0.5.1 — 2024-08-27
- 0.5.0 — 2024-06-23
- 0.4.2 — 2024-06-17
- 0.4.1 — 2022-05-26
- 0.4.0 — 2022-02-02
- 0.3.1 — 2021-08-28
- 0.3.0 — 2021-08-27
- … 7 more at https://npm.io/package/makeup-dialog/versions

## README

# makeup-dialog

Abstract class representing the base behaviour for a modal or non-modal ARIA dialog.

## CSS

No CSS is provided.

## JavaScript

```js
import Dialog from "makeup-dialog";

// non-modal (default)
document.querySelectorAll(".my-non-modal-dialog").forEach(function (el, i) {
  const widget = new Dialog(el);
});

// modal
document.querySelectorAll(".my-modal-dialog").forEach(function (el, i) {
  const widget = new Dialog(el, { modal: true });
});
```

## Config

The constructor takes a configuration object as its second parameter.

todo

## Events

### makeup-dialog-open

Fired when any dialog is opened.

### makeup-dialog-close

Fired when any dialog is closed.

---
_Source: https://npm.io/package/makeup-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._