Progress bar for modalpopup extender inside modalpopup extender

See more:

C#

ASP.NET

Visual-Studio

HTML

Ajax

I have 2 modalpopup extender...one inside another...now the issue is when i try to click the first link inside first modalpopup extender the second modalpop extender pops up with a loading image...upto here is good...now when i try to click the link of second modalpopup extender no loading image gets displayed like in first modalpopextender...

What I have tried:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:gridview runat="server" id="GridView1" showfooter="true" 
        autogeneratecolumns="false" GridLines="None" CssClass="table1"  
          
        OnRowCreated="GridView1_RowCreated" BorderColor="#356600" 
        BorderStyle="Solid" >
        <columns>
           
           <asp:TemplateField HeaderText="Date" >
<ItemTemplate>
<asp:LinkButton ID="Date" runat="server" CausesValidation="false"  CommandName="Date_Select"  Text='<%#Eval("Date","{0:yyyy-MM-dd}") %>' onclick="Date_Click" EnableTheming="False"/>
</ItemTemplate>
<EditItemTemplate>

</EditItemTemplate>
</asp:TemplateField>


             <asp:boundfield datafield="" headertext="Total" footerstyle-font-bold="true"  
                footertext="Grand Total:" >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
            
            <asp:boundfield datafield="MIns" headertext="Mins" 
                footerstyle-font-bold="true"   >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
            <asp:boundfield datafield="Amount" headertext="Amount" footerstyle-font-bold="true"  
                 >
<FooterStyle Font-Bold="True" ></FooterStyle>
            </asp:boundfield>
           
            <asp:boundfield datafield="Profit" headertext="Profit"
                footerstyle-font-bold="true">
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
            
       </columns>

<HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid" 
                  BorderWidth="1px"></HeaderStyle>

<RowStyle CssClass="td"></RowStyle>
    </asp:gridview>
 <%--..................Parent popup....................--%>

    <asp:Button runat="server" ID="btnModalPopUp" 
            style="display:none"/>
           
            
<AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender1" 
              runat="server"
             TargetControlID="btnModalPopUp"
             PopupControlID="pnlPopUp"
             BackgroundCssClass="modalBackground" CancelControlID="btnCancel1" X="400" Y="20"
            >
</AjaxToolkit:ModalPopupExtender>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
         <ProgressTemplate>
          <div class="modal">
            <div class="center" align="center">
              This can take a while. Please be patient...
              <img alt="" src="Images/loader.gif" />
             </div>
           </div>
          </ProgressTemplate>
       </asp:UpdateProgress>


<asp:Panel runat="Server" ID="pnlPopUp" CssClass="modalPopup" Width="800px">

  <asp:Button runat="server" ID="btnCancel" 
             Text="Close" BackColor="#E6FFCC" BorderColor="#C1FF80" /><br />
             <asp:Label ID="Label2" runat="server" Text="" BorderColor="#C1FF80" 
        style="font-weight: 700"></asp:Label>
                <div style ="background-color:#c1ff80;height:30px;width:780px; margin:0;padding:0">
<table cellspacing="0" cellpadding = "0" rules="all" border="1" id="tblHeader"
 style="font-family:Arial; font-weight:bolder;font-size:10pt;width:780px;color:Black;
 border-collapse:collapse;height:100%;">
    <tr>
       <td style ="width:200px;text-align:center">Customer Name</td>
       <td style ="width:150px;text-align:center">Minutes</td>
       <td style ="width:150px;text-align:center">Amount</td>
       <td style ="width:150px;text-align:center">Profit</td>
    </tr>
</table>
</div>
             <div style ="height:630px; width:800px; overflow:auto;">
          
<asp:gridview runat="server" id="GridView17" showfooter="true" 
        autogeneratecolumns="false" GridLines="None" CssClass="table" 
        HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%" 
         AllowPaging="false" ShowHeader="true">
        <columns>
           <asp:TemplateField HeaderText="Date" >
<ItemTemplate>
<asp:LinkButton ID="Customer" runat="server" CausesValidation="false"  CommandName="Date_Select"  Text='<%#Eval("Customer") %>' onclick="Customer_Click" EnableTheming="False"></asp:LinkButton>

    
</ItemTemplate>
<EditItemTemplate>

</EditItemTemplate>
</asp:TemplateField>
            
           

             <asp:boundfield datafield="MIns" headertext="Mins" footerstyle-font-bold="true" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px">
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
            <asp:boundfield datafield="Amount" headertext="Amount" 
                footerstyle-font-bold="true" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px"  >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
            <asp:boundfield datafield="Profit" headertext="Profit" footerstyle-font-bold="true" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px"
                 >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
          </columns>

<HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid" 
                  BorderWidth="1px"></HeaderStyle>

<RowStyle CssClass="td"></RowStyle>
    </asp:gridview>
    </div>
</asp:Panel>
<%--..................Child popup....................--%>
<asp:Button runat="server" ID="btnModalPopUp30" 
            style="display:none"/>
<AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender30" 
              runat="server"
             TargetControlID="btnModalPopUp30"
             PopupControlID="pnlPopUp30"
             BackgroundCssClass="modalBackground" CancelControlID="btnCancel30" X="500" Y="50">
</AjaxToolkit:ModalPopupExtender>
                <asp:UpdateProgress ID="UpdateProgress30" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
         <ProgressTemplate>
          <div class="modal">
            <div class="center" align="center">
              This can take a while. Please be patient...
              <img alt="" src="Images/loader.gif" />
             </div>
           </div>
          </ProgressTemplate>
       </asp:UpdateProgress>
       
                

<asp:Panel runat="Server" ID="pnlPopUp30" CssClass="modalPopup" Width="800px">
<%--<div id='messagediv' style="text-align:center">Loading...</div>--%>
  <asp:Button runat="server" ID="btnCancel30" 
             Text="Close" BackColor="#E6FFCC" BorderColor="#C1FF80" /><br />
             <asp:Label ID="Label4" runat="server" Text="" BorderColor="#C1FF80" 
        style="font-weight: 700"></asp:Label>
                
             <div style ="height:630px; width:800px; overflow:auto;">
          
<asp:gridview runat="server" id="GridView34" showfooter="true" 
        autogeneratecolumns="false" GridLines="Both" CssClass="table3" 
        HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%" 
         AllowPaging="false" ShowHeader="true">
        <columns>
           <asp:boundfield datafield="Vendor" headertext="Vendor"  ItemStyle-HorizontalAlign="Left"
                footerstyle-font-bold="true" ItemStyle-Width="200px"   >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
            <asp:boundfield datafield="Region" headertext="Region" footerstyle-font-bold="true" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px" ItemStyle-Height="50px" >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
            <asp:boundfield datafield="Mins" headertext="Mins" 
                footerstyle-font-bold="true" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px"  >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
            <asp:boundfield datafield="Amount" headertext="Amount" footerstyle-font-bold="true" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px"
                 >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>

            <asp:boundfield datafield="V_Mins" headertext="V_Mins" footerstyle-font-bold="true" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px"
                 >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
            
            <asp:boundfield datafield="V_Amount" headertext="V_Amount" footerstyle-font-bold="true" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px"
                 >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>

            <asp:boundfield datafield="profit" headertext="Profit" footerstyle-font-bold="true" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="150px"
                 >
<FooterStyle Font-Bold="True"></FooterStyle>
            </asp:boundfield>
             </columns>

<HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid" 
                  BorderWidth="1px"></HeaderStyle>

<RowStyle CssClass="td"></RowStyle>
    </asp:gridview>
    </div>
</asp:Panel>








</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "GridView18" EventName="PageIndexChanging" />

</Triggers>
</asp:UpdatePanel>