ASP.NET/AJAX Modal

Question

I want an animation modal (loading please wait) and when the page fully loads it disappears?

Thank you

Answer 1

Using jQuery:

$(function() { $('#loading').fadeOut(); });

The rest is CSS and an animated GIF.

Answer 2

If you're using jQuery, try something like this:

$(function() {
  var reqMgr = Sys.WebForms.PageRequestManager.getInstance();
  reqMgr.add_beginRequest(ShowWait);
  reqMgr.add_endRequest(HideWait);
});

function ShowWait() { 
  $("#Loading").fadeIn();
}

function HideWait() { 
  $("#Loading").fadeOut();
}

Then just have an element:

<div id="Loading">Loading, Please Wait...</div>

Style and position as you want with css, default it to have a display: none; though.

Answer 3

I recommend to write some simple html with your loading message (and may be a page mask to make it grayed) and place it at the beginning of the page. And at the end of page add script to remove that message and mask (see first answer). So users will see this message as soon as they get the html page (also some browsers support rendering of incomplete pages during loading of the page). See the code of this page for additional details.

Answer 4

Hi Jame, have a look at http://malsup.com/jquery/block it's nice and simple to use :)

Answer 5

he 2 others link

http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html

http://vincexu.blogspot.com/2008/10/how-to-make-modalupdate-progress-bar-on.html