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.
1.5kB gzipped
Demo
➤ **Install**
```console
yarn add dialog-lite
```
➤ **Import**
```javascript
import DialogLite from 'dialog-lite';
```
CSS
```javascript
import 'dialog-lite/dist/index.css';
```
or
```SCSS
@import "dialog-lite/dist/index.css";
```
➤ **Usage**
```javascript
const dialogLite = new DialogLite({
closingButton: true,
closingBackdrop: true,
});
dialogLite.init();
button.addEventListener('click', () => {
dialogLite.open({
stylingClass: 'dialog-lite--first-window',
});
});
```
➤ **Options**
| Option | Type | Default | Description |
|:-----------------:|:---------:|:-------:|:-------------------------------------------------------------------------------------------------------------------------------|
| `closingButton` | `boolean` | `false` | When set to true, enables the close button functionality in the dialog. The dialog can be closed by clicking the close button. |
| `closingBackdrop` | `boolean` | `false` | When set to true, enables closing the dialog by clicking on the backdrop. |
➤ **API**
| Method | Parameters | Description |
|:-------:|:--------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `init` | None | Initializes the dialog, setting up event listeners for close button, backdrop click, and escape key based on the provided options. |
| `open` | `{ stylingClass?: string }`
Default: `{ stylingClass: '' }` | Opens the dialog, applying the specified styling class. Focuses on the first element inside the dialog with tabindex="0", and stores the previously focused element. |
| `close` | None | Closes the dialog, restoring focus to the previously focused element. Adds the class for closing animation and optionally delays removal of the class. |
➤ **Events**
| Method | Description |
|:-----------------------:|:---------------------------------------------------------------------------------------------------|
| `click` (Close Button) | Triggered when the close button is clicked, closing the dialog if closingButton option is enabled. |
| `click` (Backdrop) | Triggered when the backdrop is clicked, closing the dialog if closingBackdrop option is enabled. |
| `keydown` (Escape key) | Triggered when the Escape key is pressed, closing the dialog. |
➤ **License**
dialog-lite is released under MIT license