Ajax "Processing" modal window with CSS

Ajax which means Asynchronous JavaScript And XML is a technology in which you can refresh the web page without having the flickering effect. Thus it gives a rich user experience. Now, when implementing Ajax in our web application we always thing of using some dazzy logo/animation which will indicate the user that some processing is happening in the background. At the same time we want to prevent the user from clicking other links/buttons on the web page. Here is some thing that we want to achieve:

Ajax Processing Panel

We generally have multiple web pages in our web application. In each of those pages we use the UpdatePanel control of asp.net to enable Ajax processing. The display of such a processing panel can be achieved using the UpdateProgress control of asp.net. The aspx code will look as shown below:

<asp:UpdatePanel ID="updateGrid" runat="server" ChildrenAsTriggers="true"
UpdateMode="Conditional">
<ContentTemplate>
  <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="updateGrid"
   runat="server" DynamicLayout="true" DisplayAfter="0">
         <ProgressTemplate>
               <asp:Panel ID="pnlAjaxProcessing" CssClass="ajaxProcessingContainerDiv"
       runat="server">
          <table class="ajaxProcesingTable">
              <tr>
                  <td class="ajaxProcesingImageTD">
                      <br />
                      <asp:Image ID="imgProgressBar" ImageUrl="~/Images/ajaximage.gif"
                  runat="server" />
                      <br />
                  </td>
              </tr>
              <tr>
                  <td class="ajaxProcesingTextTD">
                      Processing...
                      <br />
                  </td>
              </tr>
          </table>
      </asp:Panel>  
      </ProgressTemplate>
   </asp:UpdateProgress>

...
...
...

</ContentTemplate>
</asp:UpdatePanel>

The CSS Class are given below:

.ajaxProcessingContainerDiv
{
border: 0;
height: 10%;
width: 20%;
position: fixed;
_position: absolute;
left: 40%;
top: 40%;
color: black;
z-index: 100;

}

.ajaxProcesingTable
{
width :100%;
height: 100%;
border: 1px solid LightBlue;
background-color : White;
}

.ajaxProcesingImageTD
{
text-align :center ;
}

.ajaxProcesingTextTD
{
text-align :center;
color: #0067a2;
font-size :medium;
}

Here we can have one improvement. Instead of using the Ajax Processing Panel (pnlAjaxProcessing) in every page, we can create a user control for it and use that user control in all the pages. The advantage is, if in future we want to change the ajax processing image or the text displayed, then we will have to make changes in the user control and it will get reflected in all other pages.

Hope this helps!