ProgressBar over UpdatePanel

Example


in .aspx page



 <style>
    .Background
    {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;          
        filter: alpha(opacity=40)
    }
  
    #progressB
ackgroundFilter {
  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;
  top:30%;
  left:43%;
  padding:10px;
  width:14%;
  z-index:1001;
  background-color:#fff;
}
</style>
<script type="text/JavaScript" language="JavaScript">
    function pageLoad()
    {    
       var manager = Sys.WebForms.PageRequestManager.getInstance();
       manager.add_endRequest(endRequest);
       manager.add_beginRequest(OnBeginRequest);
    }
    function OnBeginRequest(sender, args)
    {  
     $get('ParentDiv').className ='Background';  
    }
    function endRequest(sender, args)
    {
       $get('ParentDiv').className ='';
    }
</script>







<form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
  
        <div id="ParentDiv">
       //Page contents go here
      
<asp:UpdatePanel ID="UPDATEPANELID" runat="server">
<ContentTemplate>
  <asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
         </div>
<asp:updateprogress associatedupdatepanelid="UPDATEPANELID" id="updateProgress" runat="server">
    <progresstemplate>
        <div id="progressBackgroundFilter"></div>
        <div id="processMessage"> Loading…<br /><br /><img alt="Loading" src="download.gif" /></div>
    </progresstemplate>
</asp:updateprogress> 


        </form>