Ajax loading gif

Question

I want to show loading gif while I fetch my actual content from the server. I know how to get this done if it was just that. The problem I am facing is that I want to show this loading gif as a modal box. Can some one help ?

Edited: Here is what I am doing in my code

$('#'+buttonId).click(function(){

     // Put an animated GIF image insight of content
     $.fn.colorbox({html:"<img src='/mysite/images/" + imageId + "'/>", open:true, opacity:"0.60"});

         // Make AJAX call
        $('#'+ divId).load("/mysite/" + urlToLoad);

    });

Here I am trying to using colorbox for the modal functionality and this does give me the modal window ... but the window remains open even after the content is loaded behind it.

Answer 1

It's the same as if you were using a loading gif

• load data call
• show modal
• data loaded
• hide modal

are you using jquery or anything like that?

Answer 2

Create a div that covers everything and place the image inside of it. Get the viewport height and width to via javascript to set the div's height and width, then absolutely position it at 0,0 with a z-index of 99.

Answer 3

Hi. What JavaScript libraries are you using? Most good JavaScript libraries have very easy-to-use modal box plug-ins. If you are coding your JavaScript applications by hand, then I highly recommend you take a look at jQuery. You'll be very pleased with how easy it is to learn and use and how much community support and plugins it has.

Answer 4

Thanks for all the above responses guys. I did find a solution to this. I just read the jquery docs where you can specify a callback function as part of the load function .... I using that to close the modal box.