dialog-lite
[](https://www.npmjs.com/package/dialog-lite)
[](https://github.com/ux-ui-pro/dialog-lite)
[](https://www.npmjs.org/package/dialog-lite)
DialogLite is designed to control a dialog box (modal window) on a web page, providing the functionality to open, close and apply custom styles through a simple interface.
Demo
➤ **Install**
```console
yarn add dialog-lite
```
➤ **Import**
```javascript
import { DialogLite } from 'dialog-lite';
```
or
```javascript
import { initDialogLite } from 'dialog-lite';
```
CSS
```javascript
import 'dialog-lite/dialog-lite.css';
```
or
```SCSS
@import "dialog-lite/dialog-lite.css";
```
➤ **Usage**
```javascript
const dialogLite = initDialogLite({
closingButton: true,
closingBackdrop: true,
injectCss: false, // since we import CSS separately
});
button.addEventListener('click', () => {
dialogLite.open({
stylingClass: 'dialog-lite--first-window',
});
});
```
Classic (class) API
```javascript
const dialogLite = new DialogLite({ closingButton: true, closingBackdrop: true });
dialogLite.init();
```
➤ **Markup**
Use `hidden` for the initial hidden state. Do not rely on `style="display:none"` (the library toggles via `hidden`).
```html
```
➤ **Options**
| Option | Type | Default | Description |
|:--|:--:|:--:|:--|
| `closingButton` | `boolean` | `false` | Enables close on `.dialog-lite-close-button` click. |
| `closingBackdrop` | `boolean` | `false` | Enables close on `.dialog-lite__backdrop` click. |
| `dialog` | `HTMLElement \| string` | `'.dialog-lite'` | Dialog root element or selector. |
| `mainContent` | `HTMLElement \| string \| null` | `'#main-content'` | Element/selector to set `aria-hidden` on while open. Set `null` to disable. |
| `closeButtonSelector` | `string` | `'.dialog-lite-close-button'` | Close button selector inside dialog. |
| `backdropSelector` | `string` | `'.dialog-lite__backdrop'` | Backdrop selector inside dialog. |
| `debounceMs` | `number` | `500` | Debounce window for `open/close`. |
| `hideDelayMs` | `number` | `500` | Delay before setting `hidden` on close (should match CSS). |
| `focusOnOpenSelector` | `string` | `'[tabindex="0"]'` | Element to focus when opened. |
| `lockScroll` | `boolean` | `true` | Locks page scroll while open. |
| `trapFocus` | `boolean` | `true` | Enables simple focus trap (Tab cycling) while open. |
| `emitEvents` | `boolean` | `true` | Emits `dialog-lite:open` / `dialog-lite:close` on the dialog element. |
➤ **API**
| API | Parameters | Description |
|:--|:--|:--|
| `new DialogLite(options)` | `DialogLiteOptions` | Creates controller instance. |
| `init()` | — | Attaches listeners and resolves DOM elements. |
| `open()` | `{ stylingClass?: string }` | Opens dialog, toggles classes/attributes, focuses inside. |
| `close()` | — | Closes dialog, restores focus, sets `hidden` after `hideDelayMs`. |
| `destroy()` | — | Removes listeners and clears timers. |
| `createDialogLite(options)` | `DialogLiteOptions` | Functional constructor (returns `{ init, open, close, destroy }`). |
| `initDialogLite(options)` | `DialogLiteOptions & { injectCss?: boolean; cssText?: string; cssTarget?: Document \| ShadowRoot }` | Creates instance, optionally injects CSS, calls `init()`, returns controller. |
| `injectDialogLiteCss()` | `{ target?: Document \| ShadowRoot; cssText?: string; id?: string }` | Injects `