Dialog-lite NPM

➤ Install

yarn add dialog-lite

➤ Import

import DialogLite from 'dialog-lite';

CSS

import 'dialog-lite/dist/index.css';

@import "dialog-lite/dist/index.css";

➤ Usage

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