modaly

Modaly - A Tiny Modal

Modaly is a plugin that generates a tiny modal window.

Options

Property	Default	Description
attribute	'href'	Changes the attribute responsible to indicate the modal's selector.
block	false	Prevents the modal to open.
closeButton	true	Show the close button.
closeOverlay	true	Enable close modal clicking on the overlay element.
closeSelector	'[data-close]'	Close button selector.
esc	true	Enable the key esc to close the modal.
overlayOpacity	.5	Opacity applied on the overlay element.
overlaySelector	.5	The selector of the overlay element.
prevent	true	Prevent the click action on binded element.
speed	200	Speed to open and close the modal.

Usage

Binding a button for opening

<div data-modal>
  <span data-close>x</span>
</div>

<a data-button href="[data-modal]">open</a>

const button = document.querySelector('[data-button]');

new Modaly(button).init();

Using only the API

<div data-modal>
  <span data-close>x</span>
</div>

const modal = document.querySelector('[data-modal]');
const modaly = new Modaly(modal).init();

modaly.open()

Callbacks

Callbacks are triggered over the binded element.

Event	Description
'modaly:opened'	Triggered when modaly is opened.
'modaly:closed'	Triggered when modaly is closed.

Functions

Function	Description
modaly.open()	Open the modal.
modaly.open({ key: 'value' })	Open and add params at modal.
modaly.close()	Close the modal.
modaly.close(['key'])	Close and removes keys data from modal.
modaly.block(boolean)	Block or unblock the modal.