mc

modal-css

Super small, customizable, and easy modal windows!

Showing:

Popularity

Downloads/wk

2

GitHub Stars

2

Maintenance

Last Commit

5yrs ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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 <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.

  3. 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100