Create Simple Please Wait Dialog with Twitter Bootstrap 3

 As I was searching for a responsive design pattern for my website project, I finally landed on Twitter Bootstrap. It’s quite simple and well documented. Even a developer (like me) can create a professional website with the help of twitter bootstrap. Kudos to bootstrap creators!!!.  I want to show a “please wait” dialog in my website project, which will let the user know that application is processing something in background. Here am using modal, progress bar and glyphicons,the components that are present in bootstrap default package. This modal dialog cannot dismiss by user manually. So here is my html for dialog looks like.

<!-- Modal Start here-->
<div class="modal fade bs-example-modal-sm" id="myPleaseWait" tabindex="-1"
    role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span class="glyphicon glyphicon-time">
                    </span>Please Wait
                 </h4>
            </div>
            <div class="modal-body">
                <div class="progress">
                    <div class="progress-bar progress-bar-info
                    progress-bar-striped active"
                    style="width: 100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal ends Here -->

Add the above html code to your webpage. Next step is to trigger the modal dialog. You can trigger via a jQuery like

      $('#myPleaseWait').modal('show');

On your cal back you can hide the “please wait” dialog like

      $('#myPleaseWait').modal('hide');

The following example is self-explanatory.

        function CallServerFunction() {
            $('#myPleaseWait').modal('show');
            $.ajax({
                url: "test.html",
                success: function (data) {
                    $('#myPleaseWait').modal('hide');
                    console.log('The page has been
successfully loaded');
                },
                error: function () {
                    $('#myPleaseWait').modal('hide');
                    console.log('An error occurred');
                }
            });
        }

This will looks like an infinite progress. So, here is how the whole thing will look.

please wait image
Please wait modal mock up.

The black background is the default for modal dialog in Bootstrap. Thanks, Happy Coding.

Advertisements