Animated Multi-purpose Modal Box Plugin For jQuery

A tiny and fast jQuery plugin to create animated & highly customizable modal dialog boxes for multiple purposes. E.g. alert, prompt, confirm, success, warning, info, error, etc.

How to use it:

1. Include the latest version of jQuery library from a CDN.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

2. Include the jQuery modal plugin's script and CSS in the document.

<link href="css/jquery.modal.css" rel="stylesheet">
<script src="js/jquery.modal.min.js"></script>

3. Bind the click event on an element which allows you to trigger a modal box.

$('a#alert').click(function(){
modal({
  type  : 'alert',
  title : 'Title',
  text  : "Custom Message"
  });
});

4. All the parameters.

// alert | confirm | prompt | success | warning | error | info | primary | inverted
type  : 'default',

// modal title
title : 'Title',

// modal body
text  : 'It works.',

// Modal Size (normal | large | small)
size: 'normal', 

// modal buttons
buttons    : [{
  text: 'OK', //Button Text
  val: 'ok', //Button Value
  eKey: true, //Enter Keypress

  //Button Classes (btn-large | btn-small | btn-green | btn-light-green | btn-purple | btn-orange | btn-pink | btn-turquoise | btn-blue | btn-light-blue | btn-light-red | btn-red | btn-yellow | btn-white | btn-black | btn-rounded | btn-circle | btn-square | btn-disabled)
  addClass: 'btn-light-blue', 
  onClick: function(dialog) {
    console.log(dialog);
    alert('Look in console!');
    return true;
  }
}, ],

// always centered on your screen
center: true,

// auto close modal
autoclose  : false,

// fire a function after modal closes
callback   : null,

// onShow function
onShow: function(e){console.log(e);},

// click the overlay to close the modal
closeClick : true,

// whether closable or not
closable   : true,

// Modal Custom Theme (xenon | atlant | reseted)
theme : 'default',

// background color
background : 'rgba(0,0,0,0.5)',

// z-index property
zIndex: 1050,

// custom text for alert, confirm and prompt modals
buttonText : {ok:'OK',yes:'Yes',cancel:'Cancel'},

// custom modal template
template   : '<div class="modal-box"><div class="modal-title"><a class="modal-close-btn"></a></div><div class="modal-text"></div><div class="modal-buttons"></div></div>',

// an object with each class name from modal box
_classes   : {box:'.modal-box', title:'.modal-title', content:'.modal-text', buttons:'.modal-buttons', closebtn:'.modal-close-btn'}

Change logs:

2015-08-28

• Update jquery.modal.css

2015-06-10

• The onShow now called after the dialog is displayed (end of fadein) so DOM elements from your dialog are accessible from your onShow callback

2015-04-10

• v1.2.3

2015-04-09

• Update jquery.modal.css
• Added unminified version.

2015-03-19

• Update jquery.modal.css

2015-03-18

• Update jquery.modal.min.js

2015-01-20

• v1.2.1

2015-01-19

• update.

2014-10-23

• Added a new theme: atlant.

---

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