In this article I will explain how to show ASP.Net AJAX UpdateProgress in ASP.Net AJAX ModalPopupExtender Modal Popup style.
Just like the ASP.Net AJAX ModalPopupExtender Modal Popup, the ASP.Net AJAX UpdateProgress control is displayed in the center or middle of page with a modal background covering the whole screen and 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 AJAX UpdateProgress in ModalPopupExtender Modal Popup style in ASP.Net
 
Demo
View Demo
 
Downloads

Download Code