JSPM – modaly@1.0.0

Package Exports

modaly
modaly/src/modaly.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (modaly) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

modaly