jQuery Plugin For Bootstrap Modal Enhancement - eModal

jQuery Plugin For Bootstrap Modal Enhancement - eModal
File Size: 13.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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-21

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.