Skip to content

Instantly share code, notes, and snippets.

@Ravaelles
Last active September 27, 2022 05:54
Show Gist options
  • Save Ravaelles/0507c53597c8a82168eb to your computer and use it in GitHub Desktop.
Save Ravaelles/0507c53597c8a82168eb to your computer and use it in GitHub Desktop.
Very easy javascript code to display page "Please wait" using bootstrap modal with nice progress bar.
/**
* Displays overlay with "Please wait" text. Based on bootstrap modal. Contains animated progress bar.
*/
function showPleaseWait() {
if (document.querySelector("#pleaseWaitDialog") == null) {
var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog">\
<div class="modal-dialog">\
<div class="modal-content">\
<div class="modal-header">\
<h4 class="modal-title">Please wait...</h4>\
</div>\
<div class="modal-body">\
<div class="progress">\
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"\
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%; height: 40px">\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>';
$(document.body).append(modalLoading);
}
$("#pleaseWaitDialog").modal("show");
}
/**
* Hides "Please wait" overlay. See function showPleaseWait().
*/
function hidePleaseWait() {
$("#pleaseWaitDialog").modal("hide");
}
@shinnida220
Copy link

+1

@cecilia-gh
Copy link

Can you include style used? that would save me a lot of time trying to tweak the style to get something that looks acceptable..

@amitsharmanhes
Copy link

amitsharmanhes commented Aug 25, 2022

@buminda
Instead of writing CSS for modal center, you can use modal-dialog-centered class near modal-dialog class

@professorsourabh
Copy link

thank you soo much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment