dialog-lite

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.

^{750B gzipped}

Demo

➤ Install

yarn add dialog-lite

➤ Import

import DialogLite from 'dialog-lite';

_CSS

@import "dialog-lite/dist/";

_{if your bundler supports SCSS}

@import "dialog-lite/src/";

➤ 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