As I was working on my new web project, I decided to use Twitter Bootstrap as the foundation for my styling and components.  One common feature that all web usually have is showing some kind of “Please Wait” dialog to let the user know that application is processing something in the background.  Typically in web applications we show this screen during server communications.

There are many components in the bootstrap package.  I am going to use two to put my “Please Wait” screen together – modal dialog and progress bar.  I am going to use animated striped progress bar and set its value to 100%.  This will look very similar to Silverlight infinite progress bar.  I also have to make sure the user cannot dismiss my dialog manually, so I have to block keyboard.  So, here is how my html for dialog looks like.

<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-header">
            <h1>Processing...</h1>
        </div>
        <div class="modal-body">
            <div class="progress progress-striped active">
                <div class="bar" style="width: 100%;"></div>
            </div>
        </div>
    </div>

I also added a header.  So, here is how the whole thing will look.

The black background is the default for modal dialogs in Bootstrap.

Next step is to wrap up this dialog in a reusable JavaScript component.

var myApp;
myApp = myApp || (function () {
    var pleaseWaitDiv = $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
    return {
        showPleaseWait: function() {
            pleaseWaitDiv.modal();
        },
        hidePleaseWait: function () {
            pleaseWaitDiv.modal('hide');
        },

    };
})();

All I did above is mote the html into the JavaScript variable and used jQuery to call Bootstrap’s modal function.  I added two functions to my component – show and hide the please wait.  So, if you are calling the server, call the function to show dialog and when the call complete call the one to hide it. For example:

myApp.showPleaseWait();

Thanks.

Enjoy.