Skip to content

Super small, customizable, and easy modal windows!

License

Notifications You must be signed in to change notification settings

vezwork/Modal-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 <script src="pathto/Modal.min.js"></script>

  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("<b>hey I'm a modal!</b>"); // Set the content of the modal window.

or myModal = new Modal.Modal().setAnim("cssAnimationIn", "cssAnimationOut").set("<b>hey I'm a modal!</b>"); And make sure you specify an animation-duration and some style for your modal in css.

  1. Use myModal.show();, myModal.hide();, or myModal.toggle(); to control your modal. for example:
<button onclick="myModal.toggle();">
      toggle
</button>

Still not convinced?

check out the examples folder on github 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.

About

Super small, customizable, and easy modal windows!

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published