jQuery Plugin For Bootstrap Modal Enhancement - eModal

eModal is a jQuery modal popup plugin that makes it easy to display Ajax content and alert/confirm/prompt dialog boxes using Bootstrap modal component.

How to use it:

1. Load the necessary jQuery library and Bootstrap 3 in the document.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. Load the jQuery eModal plugin after jQuery library.

<script src="dist/eModal.js"></script>

3. Create basic modal popups.

var message = "Custom message here";
var title = "Hello World!";
// alert dialog
$(".demo-1").click(function(){
  eModal.alert(message, title);
});
// confirm dialog
$(".demo-2").click(function(){
  eModal.confirm(message, title);
});
// prompt dialog
$(".demo-3").click(function(){
  eModal.prompt(message, title);
});
var url = "ajax.html";
// ajax popup
$(".demo-4").click(function(){
  eModal.ajax(url);
});

4. Full plugin options.

var options = {
  // for ajax popup
  url: "ajax.html",
  // loading indicator
  loadingHtml: '',
  // The body message string or the html element. 
  message: "The famous question?",
  // The header title string
  title: 'Header title',
  // The header subtitle string. 
  subtitle: 'Sub title',
  // custom buttons
  buttons: [
    {text: 'Ok', style: 'info',   close: true, click: eventA },
    {text: 'KO', style: 'danger', close: true, click: eventB }
  ],
  // Defines the size of modal ['sm' | 'lg']
  size: 'sm',
  // Set loading progress as message
  loading: false,
  // set message as recycable
  useBin: false,
  // css objext try apply into message body
  css: ''
  // use the possitive lable as key
  label: "True"   
  // callback
  callback: function() { },
};

Changelog:

2018-12-20

• fixed for jQuery 3+.
• fix default settings size

2016-11-03

• use ajax.done instead success

2016-11-02

2016-01-19

• Set Q as option to AMD modules

2015-11-13

• Fix $modal not defined issue on first load

2015-10-14

• eModal Deferred from jQuery

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