https://github.com/vezwork/modal-css
Super small, customizable, and easy modal windows!
https://github.com/vezwork/modal-css
animation css easy library modal simple umd
Last synced: 12 days ago
JSON representation
Super small, customizable, and easy modal windows!
- Host: GitHub
- URL: https://github.com/vezwork/modal-css
- Owner: vezwork
- License: mit
- Created: 2016-06-29T06:07:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-12T04:47:43.000Z (over 9 years ago)
- Last Synced: 2025-03-02T22:08:56.326Z (11 months ago)
- Topics: animation, css, easy, library, modal, simple, umd
- Language: JavaScript
- Homepage:
- Size: 32.2 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modal-css
###### Super small (1.5kb minified), customizable, and easy modal windows in js using css animations.
### Beautiful modal windows in 3 easy steps:
1. `npm install modal-css` Then import Modal.Modal using your favorite package manager or simply using ``
2. Create a new modal window:
```
myModal = new Modal.Modal(); // creates a modal in dom with the id "modal".
myModal.setAnim("cssAnimationIn", "cssAnimationOut"); // specify entry and exit css animation names.
myModal.set("hey I'm a modal!"); // Set the content of the modal window.
```
or
`myModal = new Modal.Modal().setAnim("cssAnimationIn", "cssAnimationOut").set("hey I'm a modal!");`
And make sure you specify an `animation-duration` and some style for your modal in css.
3. Use `myModal.show();`, `myModal.hide();`, or `myModal.toggle();` to control your modal.
for example:
```
toggle
```
### Still not convinced?
check out the [examples folder on github](https://github.com/vezwork/Modal-css/tree/master/ex) for simple useages of modal js.
### Further documentation
in `new Modal(el)` el can be
1. An html element you wish to add modal capabilities to.
2. A id for use in css styling.
3. Nothing which uses the default id "modal"
in `myModal.setAnim(animIn, animOut)` if only animIn is specified the exit animation will use the entrance animation reversed.
`myModal.set(content, selector, property)` takes one required argument: the content to insert, and two optional requirements: selector: a css selector which selects a child DOM node of the modal to insert the content into, and propery: the name of the property of the selected DOM to change, defaults to innerHTML.
`myModal.dom` exposes the actual in-document DOM element of the modal.