Responsive & CSS3 Animated jQuery Modal Plugin - JSModal

JSModal is a simple yet feature rich jQuery plugin for creating beautiful, flexible, responsive modal windows with fancy animations based on CSS3 transitions and transforms.

Basic usage:

1. To use the modal plugin start with adding the following in your document.

<link href="css/modal.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.jsmodal.js"></script>

2. Place your modal content into a container element with the CSS class of 'modal'.

<div id="modal-1" class="modal">
  <p>Modal Content</p>
  <div class="footer right">
    <a href="#" class="close">Cancel</a>
    <a href="#" class="ok">Done</a>
  </div>
</div>

3. Launch the modal with a trigger button.

$('button').click(function(e){
  e.preventDefault();
  $('#modal-1').modal({title:'Modal Title'});
});

4. Configuration options.

// Css selector to be used to close the modal.
closeButton : '.close,.cancel',

// Whether the modal should be closed when pressing the ESC key.
escClose    : true,

// Callback function when the modal has been closed
onCloseFn   : null,

// Callback function when the modal has been opened
onOpenFn    : null,

// Whether or not this is a modal dialog. 
modal       : true,

// Whether the dom of the modal can be changed
immutable   : false,

// The effect to use when opening a modal.
// scale, slide-right, slide-right, slide-bottom, newspaper, 
// fall, slide-fall, sticky-top, flip-horizontal, flip-vertical, 
// sign, super-scaled, just-me, slit
effect      : null,

// The title of the modal.
title       : '',

// Callback function when the options.doneButton has been clicked. 
// Form fields will be supplied as data argument, as well as the modal itself. 
// Callback returns true when the modal should be closed, null or false when it shoudl stay open.
callback    : null,

// Css selector to be used when using a callback and optionally closing the modal
doneButton  : '.done,.ok'

---

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