Minimal Animated Modal Popup Plugin with jQuery - Modal Lite

Modal Lite is a tiny and simple-to-use jQuery modal popup plugin that features promises, 3 CSS3 animations and asynchronous loading.

How to use it:

1. Load the required modal.css stylesheet that will provide the basic modal styles and CSS3 based open / close animations.

<link rel="stylesheet" href="/path/to/modal.css">

2. Load the jQuery modal lite plugin's script after jQuery library.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/js/modal.js"></script>

3. Create new modal instance.

var modal1 = modal({
    // options here
});

4. Display inline content in the modal.

modal1.open('Modal 1 Content Here');

5. Asynchronous loading with promise support.

var modal2 = modal({
    // options here
});

var promise = $.Deferred();

setTimeout(function() {
  promise.resolve('loaded async');
}, 2000);

modal2.open('after 2s...', {
  async: true,
  promise: promise
});

6. Options with defaults

// fade, zoom, or slide
animation: "fade",

// allow to close the modal
modalClose: true,

// close the modal with ESC Key
closeOnKey: true

Change log:

2015-12-23

• fixed undefined error on init

2015-11-16

• fixed undefined error on initialization without options

---

This awesome jQuery plugin is developed by NehrDani. For more Advanced Usages, please check the demo page or visit the official website.