Showing Updateprogress in a model window using Ajax modal popup extender

The below code will help you you to show an Ajax update progress in a Modal popup extender like the screen shot below.

The below code assumes the current page is under a master page.

Source code

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %> <%@ Register assembly="System.Web.Ajax" namespace="System.Web.UI" tagprefix="asp" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <style> .bg { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; </style> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:AjaxScriptManager ID="AjaxScriptManager1" runat="server"> </asp:AjaxScriptManager> <script runat="server"> protected void Button1_Click1(object sender, EventArgs e) { System.Threading.Thread.Sleep(2000); Label1.Text = DateTime.Now.ToString(); } </script> <asp:Button ID="Button1" runat="server" onclick="Button1_Click1" Text="Get date" /> <asp:Panel runat="server" ID="panel"> <img alt="" src="loading.gif" style="width: 130px; height: 60px" /> </asp:Panel> <asp:ModalPopupExtender ID="panel_ModalPopupExtender" runat="server" DynamicServicePath="" Enabled="True" PopupControlID="panel" TargetControlID="panel" BackgroundCssClass="bg"> </asp:ModalPopupExtender> <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <contenttemplate> <asp:Label ID="Label1" runat="server" Text="Date:"></asp:Label> </ContentTemplate> <triggers> <asp:AsyncPostBackTrigger ControlID="Button1" /> </Triggers> </asp:UpdatePanel> <script language="javascript" type="text/javascript"> Sys.Net.WebRequestManager.add_invokingRequest(Laodpopup); Sys.Net.WebRequestManager.add_completedRequest(unLaodpopup); function Laodpopup(sender, args) { $find('<%=panel_ModalPopupExtender.ClientID %>').show(); } function unLaodpopup(sender, args) { $find('<%=panel_ModalPopupExtender.ClientID %>').hide(); } function pageUnload() { Sys.Net.WebRequestManager.remove_invokingRequest(Laodpopup); Sys.Net.WebRequestManager.remove_completedRequest(unLaodpopup); } </script> </asp:Content>