My UpdateProgress Control Demo
A couple of people have asked how I achieve the effect I show on the roadshow demo when my UpdateProgress control "dims" the page and my dialogue appears in "front" - a bit like this:
The ProgressTemplate of the UpdateProgress control is surfaced for me automatically by ASP.NET AJAX when an AsyncPostBack is in progress (unless I've connected the UpdateProgress control to a specific UpdatPanel with the AssociatedUpdatePanelID property in which case it only shows for that UpdatePanel). That means all I have to do is supply a suitable piece of markup and style it in the way I choose. In my case, to achieve this effect I created a couple of <div> tags, one to give the appearance of "dimming" the background and the other to show the animated gif and the cancel button. Just like the following:
Both these <div> tags are absolutely positioned - the first one designed to be larger than the viewport (and positioned to it "obscures" it completely) and the second positioned somewhere in the centre of the viewport. I apply an opacity to the former to achieve the "dimming" effect and just style the latter in whatever way I choose. Note the need to include a "filter" rule for IE and an opacity rule for FireFox to achieve the "dimming" effect. The CSS I use to style it looks a bit like this: