jQuery Plugin For Bootstrap Modal Enhancement - eModal

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
  eModal.alert(message, title);
// confirm dialog
  eModal.confirm(message, title);
// prompt dialog
  eModal.prompt(message, title);
var url = "ajax.html";
// ajax popup

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() { },



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


  • use ajax.done instead success



  • Set Q as option to AMD modules


  • Fix $modal not defined issue on first load


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

  • Publication date: 20.12.2018
  • Source