https://github.com/wbotelhos/modaly
:eight_pointed_black_star: Modaly - A Tiny Modal
https://github.com/wbotelhos/modaly
box lightbox modal overlay popup window
Last synced: 9 months ago
JSON representation
:eight_pointed_black_star: Modaly - A Tiny Modal
- Host: GitHub
- URL: https://github.com/wbotelhos/modaly
- Owner: wbotelhos
- License: mit
- Created: 2013-05-26T03:06:07.000Z (over 12 years ago)
- Default Branch: main
- Last Pushed: 2024-12-29T23:16:47.000Z (about 1 year ago)
- Last Synced: 2025-03-26T08:37:12.206Z (10 months ago)
- Topics: box, lightbox, modal, overlay, popup, window
- Language: JavaScript
- Homepage: https://www.wbotelhos.com
- Size: 496 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Modaly - A Tiny Modal
[](https://github.com/wbotelhos/modaly/actions)
[](https://badge.fury.io/js/modaly)
[](https://codeclimate.com/github/wbotelhos/modaly/maintainability)
[](https://github.com/sponsors/wbotelhos)
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**
```html
x
```
```html
open
```
```js
const button = document.querySelector('[data-button]');
new Modaly(button).init();
```
**Using only the API**
```html
x
```
```js
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.