In this article I will explain how to display ASP.Net AJAX UpdateProgress control in center or middle of page with a modal background covering the whole screen.
Until the AJAX call is in progress, the screen will freeze and user will not able to perform any action.
 
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>
 
Display ASP.Net AJAX UpdateProgress in center of page with background covering whole screen
 
Demo
View Demo
 
Downloads

Download Code