""Waiting for..." modal dialog"
Bootstrap 3.3.0 Snippet by ehpc

Post to Facebook Tweet this

<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 ----------> <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> */ var waitingDialog = waitingDialog || (function ($) { 'use strict'; // Creating modal dialog's DOM var $dialog = $( '<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"><h3 style="margin:0;"></h3></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>'); return { /** * Opens our dialog * @param message Custom message * @param options Custom options: * options.dialogSize - bootstrap postfix for dialog size, e.g. "sm", "m"; * options.progressType - bootstrap postfix for progress bar type, e.g. "success", "warning". */ show: function (message, options) { // Assigning defaults if (typeof options === 'undefined') { options = {}; } if (typeof message === 'undefined') { message = 'Loading'; } var settings = $.extend({ dialogSize: 'm', progressType: '', onHide: null // This callback runs after the dialog was hidden }, options); // 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); } $dialog.find('h3').text(message); // Adding callbacks if (typeof settings.onHide === 'function') { $dialog.off('hidden.bs.modal').on('hidden.bs.modal', function (e) { settings.onHide.call($dialog); }); } // Opening dialog $dialog.modal(); }, /** * Closes dialog */ hide: function () { $dialog.modal('hide'); } }; })(jQuery);

Related: See More

Awesome Landing Page
Login Class="Gabriel"
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load

Questions / Comments:

why the waitingDialog keep showing when chrome autofill triggered? is it a bug? or my css problem?

epanyun () - 4 years ago - Reply 0

zong 3G internet packages www.technewspk.com

lumia () - 7 years ago - Reply 0

Really useful, thank you!

Terry Reynolds () - 7 years ago - Reply 0

Very good.. it helped me a lot!! thanks!!

lalikarl () - 7 years ago - Reply 0

This code seems to be different from the one you provided in your github because this code works fine in mobile environments and the code in your github doesn't.

Philippe Gioseffi () - 7 years ago - Reply 0

iwant run this code on ajax update progress
This code is not working for me
<asp:updateprogress id="UpdateProgress2" runat="server">
<progresstemplate>

<img alt="" class="style14" src="images/load.gif" height="30px" width="30px"/>
<script type="text/javascript">

$(document).ready(function () {
waitingDialog.show();
setTimeout(function () { waitingDialog.hide(); }, 1000);

});
</script>
</progresstemplate>
</asp:updateprogress>

peyman () - 7 years ago - Reply 0

This is exactly what ive been looking for. Thank you. Is there any way to get this to trigger only after the form if valid?

mbarrie () - 9 years ago - Reply 0

This code does not work for me?

Cisco () - 9 years ago - Reply 0

This was great; thanks a lot Man.

uneakharsh () - 9 years ago - Reply 0

This code is not working for me

Cisco () - 9 years ago - Reply 0

Please refer to the github repo. It might help

uneakharsh () - 9 years ago - Reply 0

how can i implement in master page so user click link menu the modal appear ?

jon () - 9 years ago - Reply 0

Splendid! Just what I needed! Easy to use, Beautiful, elegant... Thank you very much for this!

Andre Guilhon () - 9 years ago - Reply 0

Behzad, your issue is resolved https://github.com/ehpc/boo....

brongs, Zachary Nagler, can you be more specific, some code will help.

Eugene Maslovich () - 9 years ago - Reply 0

How do I apply a theme like the example ones? I loaded the theme's CDN but it didn't work.

Zachary Nagler () - 9 years ago - Reply 0

still not working?

Ed Jang () - 9 years ago - Reply 0

Read the Bootstrap manual Behzad: http://getbootstrap.com/jav...

$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})

RTFM () - 9 years ago - Reply 0

hi, can we make the dialog box close when the download progress done??

brongs () - 9 years ago - Reply 0

no but you can do is close is on the js json success response

Douglas Simão () - 7 years ago - Reply 0

How we can add callback function to this? when I run `waitingDialog.hide();`, I want to `alert('1');` after it's gone hidden.

Behzad () - 9 years ago - Reply 0

waitingDialog.hide();
Alert(1);

=P

Douglas Simão () - 7 years ago - Reply 0