<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script>
$(document).ready(function () {
console.log("Document ready.")
$(document).on('show.bs.modal', function () {
console.log("show event triggered");
});
});
</script>
<div class="container">
<div class="row">
<h2>"Waiting for..." modal dialog with progress bar</h2>
<p>If you need to block a user screen while loading some data or doing heavy computations,
you can use this snippet to show modal dialog with progress bar.</p>
<p>Fork it on <a href="https://github.com/ehpc/bootstrap-waitingfor">github</a></p>
<h2>Examples <small>All dialogs will be automatically closed after 2 seconds</small></h2>
<h3>Simple dialog</h3>
<pre>
waitingDialog.show();</pre>
<button type="button" class="btn btn-primary" onclick="waitingDialog.show();setTimeout(function () {waitingDialog.hide();}, 3000);">Show dialog</button>
<h3>Dialog with custom message</h3>
<pre>
waitingDialog.show('Custom message');</pre>
<button type="button" class="btn btn-success" onclick="waitingDialog.show('Custom message');setTimeout(function () {waitingDialog.hide();}, 2000);">Show dialog</button>
<h3>Dialog with custom settings</h3>
<pre>
waitingDialog.show('Custom message', {dialogSize: 'sm', progressType: 'warning'});</pre>
<button type="button" class="btn btn-warning" onclick="waitingDialog.show('Custom message', {dialogSize: 'sm', progressType: 'warning'});setTimeout(function () {waitingDialog.hide();}, 2000);">Show dialog</button>
<h3>Dialog with some callback firing after it was hidden</h3>
<pre>waitingDialog.show('Dialog with callback on hidden',{onHide: function () {alert('Callback!');}});</pre>
<p> </p>
</div>
</div>
/**
* Module for displaying "Waiting for..." dialog using Bootstrap
*
* @author Eugene Maslovich <ehpc@em42.ru>
*/
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], function ($) {
return (root.waitingDialog = factory($));
});
}
else {
root.waitingDialog = root.waitingDialog || factory(root.jQuery);
}
}(this, function ($) {
'use strict';
/**
* Dialog DOM constructor
*/
function constructDialog($dialog) {
// Deleting previous incarnation of the dialog
if ($dialog) {
$dialog.remove();
}
return $(
'<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">' +
'<div class="modal-dialog modal-m">' +
'<div class="modal-content">' +
'<div class="modal-header" style="display: none;"></div>' +
'<div class="modal-body">' +
'<div class="progress progress-striped active" style="margin-bottom:0;">' +
'<div class="progress-bar" style="width: 100%"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
}
var $dialog, // Dialog object
settings; // Dialog settings
return {
/**
* Opens our dialog
* @param message Custom message
* @param options Custom options:
* options.headerText - if the option is set to boolean false,
* it will hide the header and "message" will be set in a paragraph above the progress bar.
* When headerText is a not-empty string, "message" becomes a content
* above the progress bar and headerText string will be set as a text inside the H3;
* options.headerSize - this will generate a heading corresponding to the size number. Like <h1>, <h2>, <h3> etc;
* options.headerClass - extra class(es) for the header tag;
* options.dialogSize - bootstrap postfix for dialog size, e.g. "sm", "m";
* options.progressType - bootstrap postfix for progress bar type, e.g. "success", "warning";
* options.contentElement - determines the tag of the content element.
* Defaults to "p", which will generate a <p> tag;
* options.contentClass - extra class(es) for the content tag.
*/
show: function (message, options) {
// Assigning defaults
if (typeof options === 'undefined') {
options = {};
}
if (typeof message === 'undefined') {
message = 'Loading';
}
settings = $.extend({
headerText: '',
headerSize: 3,
headerClass: '',
dialogSize: 'm',
progressType: '',
contentElement: 'p',
contentClass: 'content',
onHide: null, // This callback runs after the dialog was hidden
onShow: null // This callback runs after the dialog was shown
}, options);
var $headerTag, $contentTag;
$dialog = constructDialog($dialog);
// Configuring dialog
$dialog.find('.modal-dialog').attr('class', 'modal-dialog').addClass('modal-' + settings.dialogSize);
$dialog.find('.progress-bar').attr('class', 'progress-bar');
if (settings.progressType) {
$dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType);
}
// Generate header tag
$headerTag = $('<h' + settings.headerSize + ' />');
$headerTag.css({ 'margin': 0 });
if (settings.headerClass) {
$headerTag.addClass(settings.headerClass);
}
// Generate content tag
$contentTag = $('<' + settings.contentElement + ' />');
if (settings.contentClass) {
$contentTag.addClass(settings.contentClass);
}
if (settings.headerText === false) {
$contentTag.html(message);
$dialog.find('.modal-body').prepend($contentTag);
}
else if (settings.headerText) {
$headerTag.html(settings.headerText);
$dialog.find('.modal-header').html($headerTag).show();
$contentTag.html(message);
$dialog.find('.modal-body').prepend($contentTag);
}
else {
$headerTag.html(message);
$dialog.find('.modal-header').html($headerTag).show();
}
// Adding callbacks
if (typeof settings.onHide === 'function') {
$dialog.off('hidden.bs.modal').on('hidden.bs.modal', function () {
settings.onHide.call($dialog);
});
}
if (typeof settings.onShow === 'function') {
$dialog.off('shown.bs.modal').on('shown.bs.modal', function () {
settings.onShow.call($dialog);
});
}
// Opening dialog
$dialog.modal();
},
/**
* Closes dialog
*/
hide: function () {
if (typeof $dialog !== 'undefined') {
$dialog.modal('hide');
}
},
/**
* Changes or displays current dialog message
*/
message: function (newMessage) {
if (typeof $dialog !== 'undefined') {
if (typeof newMessage !== 'undefined') {
return $dialog.find('.modal-header>h' + settings.headerSize).html(newMessage);
}
else {
return $dialog.find('.modal-header>h' + settings.headerSize).html();
}
}
}
};
}));