
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.
- Publication date: 20.12.2018
- Source