A jQuery modal wait dialog

The jQuery UI modal dialogs are great add-ons but they don’t necessary fit well when you just have to show a wait message  while a page loads. There are issues with removing the title bar and styling the dialog. BlockUI is another alternative but I find it little hard to style using css.

This is how I come up with a waiting dialog. Just to make it look little neat I am using two div tags here. One will cover the page content whereas the next on will display an animated image.

I need a transparent background (opacity of 0.8) div which covers the entire page, this way page content will still be visible but users can’t perform any action.

#loading-div-background      {         display:none;         position:fixed;         top:0;         left:0;         background:black;         width:100%;         height:100%;      }

Another will contain the animated image. This div should be positioned centrally in the page. Here is great article about positioning a div.

#loading-div     {          width: 300px;          height: 200px;          background-color: #0c0b0b;          text-align:center;          position:absolute;          left: 50%;          top: 50%;          margin-left:-150px;          margin-top: -100px;      }

Script

<script type="text/javascript">         $(document).ready(function () {             $("#loading-div-background").css({ opacity: 0.8 });                     });         function ShowProgressAnimation() {                         $("#loading-div-background").show();         }     </script>

I am assigning the opacity property through jQuery css method as it will take care of all browser compatibility problems.

Also I have written a method which will set the visibility of the background div to visible. This can be invoked during form submit or however you like. In this demo I am triggering through a button click event.

HTML

<button id="show" onclick="ShowProgressAnimation();" >Show dialog</button> <div id="loading-div-background">     <div id="loading-div" class="ui-corner-all" >       <img style="height:80px;margin:30px;" src="images/loading.gif" alt="Loading.."/>       <h2 style="color:gray;font-weight:normal;">Please wait....</h2>      </div> </div>

I have a button which will bring up the background div.

Also the animated loading image will be contained in another div tag along with “Please wait…” text.

Demo

Please wait....

Also check the jQuery image slide show here.