Masking Ajax UpdateProgress control during page processing

Step 1:

Create stylesheet which will cover the window during page processing





.LodingDivBackClass

{

position:fixed;

top:0px;

bottom:0px;

left:0px;

right:0px;

overflow:hidden;

padding:0;

margin:0;

background-color:#000;

filter:alpha(opacity=50);

opacity:0.5;

z-index:1000;

}

.LoadingDiv

{

position:fixed;

top:30%;

left:43%;

padding:10px;

width:20%;

z-index:1001;

background-color:#fff;

border:solid 1px #000;

}



Step 2:

Put the scriptmanager on top of the page

Put the Updatepanel on page. Put all the controls of page in this updatepanel on any event of these controls you want to show progress image which will mask the window.



Step 3:

Put the UpdateProgress control out of update panel and also provide the image which you want to show as processing.

asp:UpdateProgress ID="uProgress" runat="server" AssociatedUpdatePanelID="UpdatepnlRecord"
ProgressTemplate
div class="LodingDivBackClass"
div class="LoadingDiv" img runat="server" id="imgLoading" src="~/images/progressbar.gif" /
div
div
ProgressTemplate
asp:UpdateProgress