https://github.com/vimtor/modaly.js
Tiny and easy javascript library for creating web modals.
https://github.com/vimtor/modaly.js
javascript modal modal-dialogs modals tiny
Last synced: 4 months ago
JSON representation
Tiny and easy javascript library for creating web modals.
- Host: GitHub
- URL: https://github.com/vimtor/modaly.js
- Owner: vimtor
- License: mit
- Created: 2019-07-27T14:13:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-15T13:32:41.000Z (over 5 years ago)
- Last Synced: 2024-11-01T07:33:22.894Z (over 1 year ago)
- Topics: javascript, modal, modal-dialogs, modals, tiny
- Language: JavaScript
- Size: 998 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# modaly.js [](https://travis-ci.org/papeloto/modaly.js) [](https://coveralls.io/github/papeloto/modaly.js?branch=master) 
Tiny and easy javascript library for creating web modals.
- Easy to use and customize
- Lightweight **3.5kB** (1.41 kB gzip)
- Automatic accessibility features
- Single file with styles injection
- Highly compatible ([browser list](https://browserl.ist/?q=%3E+0.25%25%2C+not+dead%2C+not+ie+11))
## Install
NPM
```sh
npm install modaly.js
```
CDN
```html
```
Alternatively, you can [download](https://github.com/papeloto/modaly.js/tree/master/dist) distribution files directly.
## Usage
The basic setup for one modal with default options is the following.
```html
```
```js
new Modaly("#modal-1");
```
To open the modal add the `data-modaly-open` attribute to any DOM element.
```html
Open Modal
```
To close the modal add the `data-modaly-close` attribute to any element inside the modal.
```html
```
You can open/close the modal programmatically.
```js
const modal = new Modaly("#offer-modal");
if (offersAvailable) {
modal.show();
}
```
```js
const modal = new Modaly("#timeout-modal");
setTimeout(() => modal.hide(), 5000);
```
## Options
You can further customize the behaviour and looks of your modals.
```js
new Modaly("#modal-custom", {
// Style
background: "black",
opacity: 0.75,
duration: 250,
animation: "ease-in",
// Navigation
escape: true,
overlay: true,
accesible: true,
// Callbacks
onShow: (modal, trigger) => {},
onHide: (modal, trigger) => {}
});
```
| Option | Default | Description |
| :---------- | :-------- | :----------------------------------------------------------------- |
| background | "black" | Modal overlay color |
| opacity | 0.75 | Modal overlay opacity |
| duration | 250 | Milliseconds that the transition lasts |
| animation | "ease-in" | Timing function for the transition |
| escape | true | If the modal can be closed using the `ESC` key |
| overlay | true | If the modal can be closed clicking the overaly |
| accessible | true | Setup the modal and triggers to be used by assistive technologies |
| lazyLoading | true | Lazy load the resources inside the modal with `data-src` attribute |
If the initial microsecond where the modal flashes is a problem, you can always add the display none attribute.
```html
```
## Callbacks
#### `onShow(modal, trigger)`
Fired when the modal it is about to open.
- `modal`: the modal DOM element.
- `trigger`: which DOM element openned the modal. `null` if no DOM element triggered it.
#### `onHide(modal, trigger)`
Fired when the modal it is about to close.
- `modal`: the modal DOM element.
- `trigger`: which DOM element closed the modal. `null` if no DOM element triggered it.
## Lazy Loading
Since version 0.5.0 you can lazy load the resources inside the modal when it opens. This comes in handy when dealing with image slideshows libraries that do not support this feature.
To use it, as in many other libraries, simple add the `data-src` attribute to the resource you want to lazy load.
![]()
If you use your own lazy loading, you can disable it by setting to `false` the `lazyLoading` options parameter.
## Accessibility
If the option `accesible` is `true`, accessibility attributes will be added to the modal and the close triggers automatically.
It will change from this.
```html
```
To this. The `aria-hidden` attribute will toggle accordingly to the modal.
```html
```
*Disclaimer: I am by no means an expert on accessibility technologies, but if you are one, feel free to reach out for improving the library.*
## Licensing
Created by [Victor Navarro](https://github.com/papeloto/) and licensed under [MIT](https://github.com/papeloto/modaly.js/blob/master/LICENSE) license.