Display ASP.Net Ajax UpdateProgress in the middle of the Page

Here I will explain how to display ASP.Net AJAX UpdateProgress control in middle of the page with a modal background covering the whole screen.

Until the AJAX call is in progress, the screen will freeze and user will not able to perform any action.

Example:
    Follow the below steps:

    1. Add AjaxControlToolkit to your application, and register the same in your .aspx page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 
TagPrefix="asp" %>

    2. Add a ScriptManager to your .aspx page.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

   3. Add the below CSS in tag in .aspx page or in external CSS file.
   

.divWaiting{
   
position: absolute;
background-color: #FAFAFA;
z-index: 2147483647 !important;
opacity: 0.8;
overflow: hidden;
text-align: center; top: 0; left: 0;
height: 100%;
width: 100%;
padding-top:20%;
} 

   4. Add UpdateProgress to your page. Provide an Image and a text message in >progresstemplate<.

       With DisplayAfter property, you can modify the time after which the message should displaying. 
       The value should be in microseconds.
       AssociatedUpdatePanelId is the Id of the update panel which contains the controls.

<asp:UpdateProgress ID="UpdateProgress1" DisplayAfter="10" 
runat="server" AssociatedUpdatePanelID="upTest">
<ProgressTemplate>
  <div class="divWaiting">            
 <asp:Label ID="lblWait" runat="server" 
 Text=" Please wait... " />
 <asp:Image ID="imgWait" runat="server" 
 ImageAlign="Middle" ImageUrl="~/Images/wait.gif" />
  </div>
</ProgressTemplate>
</asp:UpdateProgress>

  5. Add the controls in UpdatePanel which is associated with UpdateProgress.  Whenever any event fire  from a control inside associated UpdatePanel, the progress image and message will be shown in the center of  screen.

 <asp:UpdatePanel ID="upTest" runat="server">
    <ContentTemplate>
      <asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" Text="Submit"  
       runat="server" /> 
    </ContentTemplate>
</asp:UpdatePanel>

Now, if you want to check the above functionality, then use the below code in btnSubmit_Click event.

protected void btnSubmit_Click(object sender, EventArgs e)
{
    Thread.Sleep(2000); 
}