Modaly is a plugin that generates a tiny modal window.
| 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. |
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 are triggered over the binded element.
| Event | Description |
|---|---|
'modaly:opened' |
Triggered when modaly is opened. |
'modaly:closed' |
Triggered when modaly is closed. |
| 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. |