CodeKicks.com
Focus on Microsoft Technologies - Tutorials, Articles, Code Samples.

Tuesday, June 29, 2010

How to block the ASP.NET page while ajax UpdateProgress is being displayed.

Step 1:

Copy the following styles to your aspx page.

<style type="text/css">
      .hide
      {
          display: none;
      }
      .show
      {
          display: inherit;
      }
       .progressBackgroundFilter
      {
          position: absolute;
          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;
      }
      .processMessage
      {
          position: absolute;
          font-family:Verdana;
          font-size:12px;
          font-weight:normal;
          color:#000066;
          top: 30%;
          left: 43%;
          padding: 10px;
          width: 18%;
          z-index: 1001;
          background-color: #fff;
      }
  </style>

Step 2: Put the divs as shown below in UpdateProgress control.

<asp:UpdateProgress ID="updPrgsBaselineTab" runat="server">
       <ProgressTemplate>
           <div id="progressBackgroundFilter" class="progressBackgroundFilter">
           </div>
           <div id="processMessage" class="processMessage">
               <table width="100%">
                   <tr style="width: 100%">
                       <td style="width: 100%">
                           Please Wait..........
                       </td>
                   </tr>
                   <tr style="width: 100%">
                       <td style="width: 100%" align="center">
                           <img src="../Images/Update_Progress.gif" />
                       </td>
                   </tr>
               </table>
           </div>
       </ProgressTemplate>
   </asp:UpdateProgress>

Post a Comment