Dec 12, 2011

A jQuery modal wait dialog

Dec 12, 2011

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. 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 came up with a wait dialog. I am using two divs here. 
First div will cover the page content in such a way that the content is still visible but user cannot perform any action. For this, I need a div with near transparent background (opacity of 0.8)

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


The second div will contain an animated image and it can be positioned centrally in the page.

  
   #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() funtion as it will take care of any browser compatibility issues.
Also, I have written a method which will bring up the background div. This can be invoked during form submit or whenever it is desired to block the page content. 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>



Demo


Loading..

Please wait....

Also check the jQuery image slide show here.

27 comments:

  1. Really Great.... Helped me a lot. Thanks

    ReplyDelete
  2. Great script!, thank you very, very much.

    ReplyDelete
  3. how to hide the dialog when the process is finished... let's say the gridview databind is complete

    ReplyDelete
    Replies
    1. You can use the hide() function.

      function HideProgressAnimation() {
      $("#loading-div-background").hide();
      }

      Delete
  4. Really great, helped me too, Thanks very much
    Vraiment utile, merci beaucoup.

    ReplyDelete
  5. Realy Great, thanks, that helped me.

    ReplyDelete
  6. Thank you, it was really helpful.

    ReplyDelete
  7. Thank you! It's great helpful.

    ReplyDelete
  8. Could you please share the image file? I'm not able to get the image of right size.
    Thank you.

    ReplyDelete
  9. where is the css class definition for "ui-corner-all"?

    ReplyDelete
    Replies
    1. It's a jquery ui css class. You can download it from jquery ui
      It has nothing to do with the modal window though.

      Delete
  10. Great Script thanks....

    ReplyDelete
  11. Thanks for sharing it

    ReplyDelete
  12. Very nice! Thank you!

    ReplyDelete
  13. Very nice script. Work fine. I need loading.gif image...How can I get that?

    ReplyDelete
    Replies
    1. There are tons of sites to generate loading gif images.. loadinggif.com, ajaxload.info etc

      Delete
    2. Thank You So much. I just find a problem. The script runs fine on all browser except Internet Explorer. I am using IE 11. Animated loading.gif remains static instead of animating....Any work around in original script will help to solve this problem.....

      Delete
    3. Hello Lav G

      Your script works fine in all browsers except Internet Explorer where animated loading gif remains static. Do you have any solution for that?

      Thanks in advance...

      Delete
    4. Hi Manan,
      I guess this demo works with IE as well. Not sure if it related to compatibility mode. You would wanna check out this post.

      Delete
  14. Please help me. I have a searched a lot on internet without any success. I have tried Img Source as a loading-div background url (../images/loading.gif) and then sets div (loading-div) visibility: none...but none of the method works...

    Function: This is on final payment button on web site. When a customer clicks on 'Complete Order" it shows loading gif with the message and then redirect to receipt page.

    I am not able to paste an actual code since blog is not allowing me to paste html code....

    I am using Internet explorer 11...What interent explorer version are you using?

    Thx

    Manan

    ReplyDelete
  15. The sample code is outdate. I have to make some changes to have similar look. It's good anyway.

    ReplyDelete
  16. This saved me some time. Thanks

    ReplyDelete
  17. thank u, u saved me....

    ReplyDelete
  18. Good article! very useful for me

    ReplyDelete
  19. Thank you! very useful for me

    ReplyDelete

Top Ad 728x90