jQuery Plugin For Bootstrap Modal Enhancement - eModal

jQuery Plugin For Bootstrap Modal Enhancement - eModal
File Size: 13.5 KB
Views Total: 6922
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/iframe popup boxes and alert/confirm/prompt dialog boxes using Bootstrap 4/3 modal component.

How to use it:

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

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the jQuery eModal plugin after jQuery library.

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

3. Create dialog boxes as follows:

var message = "Custom message here";
var title = "Hello World!";


// alert dialog
eModal
.alert(message, title)
.then(function () { 
  // do something
});

// confirm dialog
eModal
.confirm(message, title)
.then(
  function (/* DOM */) { 
    // Confirm
  },
  function (/*null*/) { 
    // Cancel
  }
);

// prompt dialog
eModal
.prompt({ 
  size: eModal.size.sm, 
  message: 'What\'s your name?', 
  title: title 
})
.then(
  function (input) { 
    // message: 'Hi ' + input + '!', title: title, imgURI: 'https://avatars0.githubusercontent.com/u/4276775?v=3&s=89' 
  },
  function () { 
    // error
});

// ajax popup
var params = {
    buttons: [
     { text: 'Close', close: true, style: 'danger' },
     { text: 'New content', close: false, style: 'success', click: ajaxDemo }
    ],
    size: eModal.size.lg,
    title: title,
    url: 'https://example.com/api/'
};
eModal
.ajax(params)
.then(function () { 
  // do something
});

// iframe popup
eModal
.iframe('https://www.youtube.com/embed/YRgluqis7rQ?autoplay=1', title)
.then(function () { 
  // do something
});

// custom popup
eModal.setEModalOptions({
  loadingHtml: '<span class="fa fa-circle-o-notch fa-spin fa-3x text-primary"></span><h4>Loading</h4>',
});

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: ''

};

Changelog:

v1.2.69 (2020-04-15)

  • Fixed for Bootstrap 4.

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.