In this article I will explain how to use ASP.Net AJAX UpdateProgress to lock (disable) controls with Modal Background during UpdatePanel Partial PostBack in ASP.Net.
 
HTML Markup
HTML Markup consists of an ASP.Net AJAX UpdatePanel with a Button and an AJAX ASP.Net UpdateProgress control with an HTML DIV and a loader image.
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
    <div class="modal">
        <div class="center">
            <img alt="" src="loader.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <div align="center">
        <h1>
            Click the button to see the UpdateProgress!</h1>
        <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
    </div>
</ContentTemplate>
</asp:UpdatePanel>
 
 
Event handler for Button
Inside the button click event handler, I have added delay of 5 seconds so that we can view the ASP.Net AJAX UpdateProgress in action.
protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}
 
 
CSS styles in order to display UpdatePanel in center of page with background covering whole screen
The following CSS has to be placed on your page which gives AJAX UpdateProgress the look and feel and alignment we need.
<style type="text/css">
body
{
    margin: 0;
    padding: 0;
    font-family: Arial;
}
.modal
{
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}
.center
{
    z-index: 1000;
    margin: 300px auto;
    padding: 10px;
    width: 130px;
    background-color: White;
    border-radius: 10px;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
.center img
{
    height: 128px;
    width: 128px;
}
</style>
 
Use ASP.Net AJAX UpdateProgress to lock (disable) controls with Modal Background
 
Demo
View Demo
 
Downloads

Download Code