I use this code to disable buttons during an ajax postback by displaying a transparent .gif with a loading image.
1. The Master Page.
<body>
<form id="form1" runat="server">
<aspx:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="release" EnablePartialRendering="True"
AsyncPostBackTimeout="600">
<Scripts>
<aspx:ScriptReference Path="AjaxScripts.js" />
</Scripts>
</aspx:ScriptManager>
<div id="updateProgressDiv" class="updateProgress" style="display: none;">
<aspx:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="updateImg" class="updateProgressImg">
<img id="imgSearch" runat="server" class="padpic" src="loading.gif"
alt="Loading Content...Please Wait." />
</div>
</ContentTemplate>
</aspx:UpdatePanel>
</div>
</form>
</body>
2. The Child Page
<asp:Content ID="Content1" ContentPlaceHolderID="cphMain" runat="Server">
<ajax:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" BehaviorID="animation"
runat="server" TargetControlID="UpdatePanel1">
<Animations>
<OnUpdating>
<ScriptAction Script="onUpdating();" />
</OnUpdating>
<OnUpdated>
<ScriptAction Script="onUpdated();" />
</OnUpdated>
</Animations>
</ajax:UpdatePanelAnimationExtender>
<aspx:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
</ContentTemplate>
</aspx:UpdatePanel>
</asp:Content>
3. JavaScript Functions
//Show div for update animation extender - disable page
var name = 'updateProgressDiv';
function onUpdating(){
var updateImg = $get('updateImg');
if(self.pageYOffset) {
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rY = document.body.scrollTop;
}
if(document.all) {
cY += rY;
}
updateImg.style.marginTop = (cY-25) + "px";
var updateProgressDiv = $get(name);
updateProgressDiv.style.display = '';
Sys.UI.DomElement.setLocation (updateProgressDiv, 0, 0);
}
//Hide div for update animation extender - enable page
function onUpdated() {
var updateProgressDiv = $get(name);
updateProgressDiv.style.display = 'none';
}
4. The CSS Styles
.updateProgress
{
z-index: 100;
background-color: Gray;
filter: alpha(opacity=60);
opacity: 0.6;
position: absolute;
width: 100%;
height: 10000px;
}
.updateProgressImg
{
float:left;
z-index: 101;
width: 100%;
text-align: center;
}
.padpic
{
padding: 5px;
}
Patrick McNamara, BS-IS/CS, MBA, MAED
ASP.NET Web Application Developer
Asteryx, LLC.
http://asteryx.com
pat@asteryx.com