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.