Asp .net Show modal popup on click event linkbutton which is on Modal popup

Question

I shown Modal popup (Modal2) on this Modal popup I have grid contain link button. on click event of link button i have to show another modal popup having grid.

My First Modal popup Showing

<asp:Button ID="btnScholershipApp" runat="server" Text="Button" SkinID="SelectButton" />
        <Ajax:ModalPopupExtender ID="Modal2" runat="server" PopupControlID="table2" CancelControlID="img1"
            TargetControlID="btnScholershipApp" OnCancelScript="javascript:__doPostBack('clearfields2')">
        </Ajax:ModalPopupExtender>

First Modal popup

 <table id="table2" runat="server" border="0" cellpadding="0" cellspacing="0" height="100%"
    style="border-collapse: collapse; height: auto; margin: 0px; padding: 0px; display: none;"
    width="1000" class="popupheading">
    <tr>
        <td>
            <div style="width: 1000px; height: auto;">
                <div style="width: 1000px; height: 40px; background-image: url('../../../PopU/top.png');
                    background-repeat: no-repeat;">
                    <img id="img1" runat="server" height="40" src="~/Images/close1.png" style="float: right;"
                        width="40" />
                </div>
                <div style="width: 980px; height: auto; min-height: 100px; background-image: url('../../../PopU/center_bg.png');
                    background-repeat: repeat-y; padding: 0 10px 0 10px;">
                    <asp:Panel ID="modal_panel2" runat="server" Height="550" Width="980">
                        <table cellpadding="7px" cellspacing="7px" width="100%">
                            <tr>
                                <td>
                                    <fieldset>
                                        <legend class="legend">Search </legend>
                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td>
                                                    <asp:Label ID="Label5" runat="server" Text="Student Name"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSAStudentName" runat="server"></asp:TextBox>
                                                </td>
                                                <td>
                                                    <asp:Label ID="Label6" runat="server" Text="Student ID"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSAStudentID" runat="server"></asp:TextBox>
                                                </td>
                                                <td>
                                                    <asp:Label ID="Label4" runat="server" Text="Scholership Name"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSAScholershipName" runat="server"></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="Label7" runat="server" Text="University PRN"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSAScholershipPRN" runat="server"></asp:TextBox>
                                                </td>
                                                <td>
                                                    <asp:Label ID="Label12" runat="server" Text="Date Of Birth"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSADateOfBirth" runat="server"></asp:TextBox>
                                                    <ajaxtoolkit:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True"
                                                        TargetControlID="txtSADateOfBirth">
                                                    </ajaxtoolkit:CalendarExtender>
                                                </td>
                                            </tr>
                                        </table>
                                    </fieldset>
                                </td>
                            </tr>
                        </table>
                        <table width="100%">
                            <tr style="background-color: #F6F0DB;">
                                <td align="center" colspan="4">
                                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                        <ContentTemplate>
                                            <asp:HiddenField ID="hfScholershipName" runat="server" />
                                            <asp:HiddenField ID="hfScholershipPRN" runat="server" />
                                            <asp:HiddenField ID="hfScholershipApplicationID" runat="server" />
                                            <asp:HiddenField ID="hfScholershipDocumentID" runat="server" />
                                            <asp:GridView ID="grdScholershipApp" runat="server" AutoGenerateColumns="false" AllowPaging="True"
                                                OnPageIndexChanging="grdScholershipApp_PageIndexChanging" PageSize="10" Width="970px">
                                                <Columns>
                                                    <asp:BoundField DataField="StudentId" HeaderText="Student ID" />
                                                    <asp:BoundField DataField="FullName" HeaderText="Student Name">
                                                        <ItemStyle HorizontalAlign="Center" Width="250" />
                                                    </asp:BoundField>
                                                    <asp:BoundField DataField="ScholershipPRN" HeaderText="University PRN" />
                                                    <asp:BoundField DataField="DateOfBirth" HeaderText="Date of birth" />
                                                    <asp:BoundField DataField="ScholershipName" HeaderText="Scholership Name" />
                                                    <asp:TemplateField HeaderText="Options">
                                                        <ItemTemplate>
                                                            <asp:UpdatePanel ID="pnlup2" runat="server">
                                                                <Triggers>
                                                                    <asp:PostBackTrigger ControlID="btnEditStudentApplication" />
                                                                </Triggers>
                                                                <Triggers>
                                                                    <asp:AsyncPostBackTrigger ControlID="btnStudentDocumentIDShow" EventName="Click" />
                                                                </Triggers>
                                                                <ContentTemplate>
                                                                    <asp:ImageButton ID="btnEditStudentApplication" runat="server" CommandArgument='<%#Eval("PanomtechServiceID")+";"+Eval("StudentID")+";"+Eval("ScholershipPRN")+";"+Eval("ScholershipName")%>'
                                                                        SkinID="Select" OnClick="btnEditStudentApplication_Click" />
                                                                    <%--<asp:Panel ID="Panel12" runat="server" >
                                                                        <asp:UpdatePanel ID="UpdatePanel4" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                                                                            <ContentTemplate>
                                                                                <asp:Button ID="hfbtnStudentDocumentIDShow" runat="server" Style="display: none;" />

                                                                            </ContentTemplate>
                                                                            <Triggers>
                                                                                <asp:AsyncPostBackTrigger ControlID="hfbtnStudentDocumentIDShow" EventName="Click" />
                                                                            </Triggers>
                                                                        </asp:UpdatePanel>
                                                                    </asp:Panel>--%>
                                                                    <asp:LinkButton ID="btnStudentDocumentIDShow" runat="server" Text="Documents" CommandArgument='<%#Eval("PanomtechServiceID")+";"+Eval("StudentID")+";"+Eval("StudentDocumentID")%>'
                                                                        OkControlID="hfbtnStudentDocumentIDShow" />
                                                                    <%-- OnClick="hfbtnStudentDocumentIDShow_Click" --%>
                                                                    <%--<Ajax:ModalPopupExtender ID="modal4" runat="server" PopupControlID="table4" CancelControlID="img3"
                                                                        TargetControlID="btnStudentDocumentIDShow" OnCancelScript="javascript:__doPostBack('clearfields4')">
                                                                    </Ajax:ModalPopupExtender>--%>
                                                                </ContentTemplate>
                                                            </asp:UpdatePanel>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                </Columns>
                                                <EmptyDataTemplate>
                                                    no data.......
                                                </EmptyDataTemplate>
                                            </asp:GridView>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </div>
                <div style="width: 1000px; height: 40px; background-image: url('../../../PopU/bottom.png');
                    background-repeat: no-repeat;">
                </div>
            </div>
        </td>
    </tr>
</table>
<Ajax:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="btnScholershipApp">
    <Animations>
            <OnClick>              
                <Parallel AnimationTarget="table2"
                Duration=".9" Fps="50">
                <FadeIn Duration=".9"/>
                </Parallel>                 
            </OnClick>                               
    </Animations>
</Ajax:AnimationExtender>

LinkButton Event

protected void hfbtnStudentDocumentIDShow_Click(object sender, EventArgs e)
{
   modal4.Show();
}

Second Modal popup

<table id="table4" runat="server" border="0" cellpadding="0" cellspacing="0" height="100%"
    style="border-collapse: collapse; height: auto; margin: 0px; padding: 0px;" width="1000"
    class="popupheading">
    <tr>
        <td>
            <div style="width: 1000px; height: auto;">
                <div style="width: 1000px; height: 40px; background-image: url('../../../PopU/top.png');
                    background-repeat: no-repeat;">
                    <img id="img4" runat="server" height="40" src="~/Images/close1.png" style="float: right;"
                        width="40" />
                </div>
                <div style="width: 980px; height: auto; min-height: 100px; background-image: url('../../../PopU/center_bg.png');
                    background-repeat: repeat-y; padding: 0 10px 0 10px;">
                    <asp:Panel ID="modal_panel4" runat="server" Height="550" Width="980">
                        <table width="100%">
                            <tr style="background-color: #F6F0DB;">
                                <td align="center" colspan="4">
                                    <asp:UpdatePanel ID="uppanel" runat="server">
                                        <ContentTemplate>
                                            <asp:GridView ID="grdStudentDocuments" runat="server" AutoGenerateColumns="false"
                                                AllowPaging="True" OnPageIndexChanging="grdStudentDocuments_PageIndexChanging"
                                                PageSize="10" Width="970px">
                                                <Columns>
                                                    <asp:BoundField DataField="StudentId" HeaderText="Student ID" />
                                                    <asp:BoundField DataField="FullName" HeaderText="Student Name">
                                                        <ItemStyle HorizontalAlign="Center" Width="250" />
                                                    </asp:BoundField>
                                                    <asp:BoundField DataField="DocumentName" HeaderText="Document Name" />
                                                    <asp:BoundField DataField="ScholershipPRN" HeaderText="University PRN" />
                                                    <asp:BoundField DataField="ScholershipName" HeaderText="Scholership Name" />
                                                    <asp:TemplateField HeaderText="Select">
                                                        <ItemTemplate>
                                                            <asp:UpdatePanel ID="pnlup3" runat="server">
                                                                <Triggers>
                                                                    <asp:PostBackTrigger ControlID="btnEditSStudentDocuments" />
                                                                </Triggers>
                                                                <ContentTemplate>
                                                                    <asp:ImageButton ID="btnEditSStudentDocuments" runat="server" CommandArgument='<%#Eval("StudentDocumentID")%>'
                                                                        SkinID="Select" OnClick="btnEditSStudentDocuments_Click" />
                                                                </ContentTemplate>
                                                            </asp:UpdatePanel>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                </Columns>
                                                <EmptyDataTemplate>
                                                    no data.......
                                                </EmptyDataTemplate>
                                            </asp:GridView>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </div>
                <div style="width: 1000px; height: 40px; background-image: url('../../../PopU/bottom.png');
                    background-repeat: no-repeat;">
                </div>
            </div>
        </td>
    </tr>
</table>
<asp:Button ID="hfbtnStudentDocumentIDShow" runat="server" OnClick="hfbtnStudentDocumentIDShow_Click"
    Style="display: none;" />
<Ajax:ModalPopupExtender ID="modal4" runat="server" PopupControlID="table4" CancelControlID="img3"
    TargetControlID="hfbtnStudentDocumentIDShow" OnCancelScript="javascript:__doPostBack('clearfields4')">
</Ajax:ModalPopupExtender>
<Ajax:AnimationExtender ID="AnimationExtender4" runat="server" TargetControlID="hfbtnStudentDocumentIDShow">
    <Animations>
          <OnClick>              
             <Parallel AnimationTarget="table4"
                   Duration=".9" Fps="50">
                   <FadeIn Duration=".9"/>
             </Parallel>                 
         </OnClick>                                                                                                        
    </Animations>
</Ajax:AnimationExtender>

Problem

When I click on link button it does not display any thing Please help me

Answer 1

Try this, i read somewhere on a blog that when i was stuck in this issue that using ModaloPopup Extender in Update Panel causes issue if we do not use them in the right order, the code i am posting works fine for me, in my case also i am using ModalPopupExtender within update panel try this order of ModalPopupExtender with Update Panel, it will surely work:

    <div class="popup">
            <asp:Button ID="Button7" runat="server" Text="Button" Style="display: none;" />
            <asp:Button ID="Button8" runat="server" Style="display: none;" />

            <asp:ModalPopupExtender ID="ModalPopupUploadFiles" BehaviorID="ModalPopupUploadFiles" runat="server" CancelControlID="ImageButton1"
                TargetControlID="Button7" PopupControlID="PanelUploadFiles" PopupDragHandleControlID="PopupHeader"
                Drag="true" BackgroundCssClass="Overlay">
                <Animations>         
                    <OnShown>
                        <FadeIn Duration=".50" Fps="10" />            
                    </OnShown>
                </Animations>
            </asp:ModalPopupExtender>
            <!--unique css-->
            <asp:Panel ID="PanelUploadFiles" runat="server" Style="display: none; overflow:scroll; width:750px; height:400px;" class="PopUpPanel">

                <asp:Panel ID="panel1" runat="server" class="closeButton">
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/cross.png"/>
                </asp:Panel>
                <asp:UpdatePanel ID="updtPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
            <ContentTemplate>
                <br />
                <br />
                <table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="left" valign="top">
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="left" valign="top">
<table id="delgateContainer" width="90" border="0" align="left" cellpadding="0" cellspacing="3">
  <tr align="center" valign="middle">
    <td><asp:ImageButton ID="btnAddFiles" ClientIDMode="Static" ImageUrl="~/images/add.gif" runat="server"/></td>
    <td><asp:ImageButton ID="btnStartUpload" ClientIDMode="Static" ImageUrl="~/images/start.gif" runat="server" OnClick="btnStartUpload_Click" /></td>
    <td><asp:ImageButton ID="btnCancelUpload" ImageUrl="~/images/cancel.gif" runat="server" OnClick="btnCancelUpload_Click" /></td>
    <td><asp:ImageButton ID="btnDeleteAllUploads" ClientIDMode="Static" ImageUrl="~/images/delete2.gif" runat="server" OnClick="btnDeleteAllUploads_Click" /></td>
    <td align="left"><asp:CheckBox ID="chckBoxDeleteAll" ClientIDMode="Static" runat="server" /></td>
    <td>&nbsp;</td>
  </tr>
<tr align="center" valign="middle">
    <td colspan="6">&nbsp;</td>
    </tr>
</table>
<p class="gr"><strong></strong></p><p>&nbsp;        </p></td>
</tr>
          <tr>
            <td height="1" colspan="2" class="bgbl"></td>
            </tr>
        </table></td>
      </tr>

       <asp:GridView ID="gvUploadFiles" ClientIDMode="Static" onRowCommand="gvUploadFiles_Clicked" DataKeyNames="FileID,FileName,FileSize,FilePath,Status" AllowPaging="false" runat="server"
       PagerStyle-HorizontalAlign="Center" AutoGenerateColumns="false" Width="90%"
       CellPadding="0" BorderWidth="0" AlternatingRowStyle-BorderColor="LightGray" AlternatingRowStyle-BorderWidth="1" GridLines="None" ShowHeader="true"  AlternatingRowStyle-BackColor="#f9f9f9" >
       <Columns>


       <asp:ImageField DataImageUrlField="ThumbanilPath" HeaderText="Thumbnail" ItemStyle-CssClass="alignmentCenter" ControlStyle-Width="100px"  ControlStyle-Height="100px" runat="server"></asp:ImageField>

       <asp:BoundField DataField="FileName" ItemStyle-CssClass="alignmentCenter" HeaderText="File Name"  />
       <asp:BoundField DataField="FileSize" ItemStyle-CssClass="alignmentCenter" HeaderText="File Size"  />
 <asp:TemplateField>
       <ItemTemplate>
       <asp:HiddenField ID="filePaths" Value="FilePath" runat="server"/>
       </ItemTemplate>
       </asp:TemplateField>


       <asp:TemplateField>   
      <ItemTemplate>
<asp:ImageButton CommandName="doingUpload" ItemStyle-CssClass="alignmentRight"  class="btnStart" CommandArgument='<%#Container.DisplayIndex%>' ID="imgBtnStart" ImageUrl="~/images/start2.gif" runat="server" /></ItemTemplate>
      </asp:TemplateField>

      <asp:TemplateField>
      <ItemTemplate>
      <asp:ImageButton ID="imgBtnCancel" ItemStyle-CssClass="alignmentLeft" CommandName="cancelUploading" CommandArgument='<%#Container.DisplayIndex%>' ImageUrl="~/images/cancel2.gif" runat="server" /></ItemTemplate>
      </asp:TemplateField>

      <asp:TemplateField>    
      <ItemTemplate>      
      <asp:ImageButton  CommandName="deleteFile" ItemStyle-CssClass="alignmentRight" Visible="false" id="imgBtnDelete" CommandArgument='<%#Container.DisplayIndex%>' runat="server" ImageUrl="~/images/delete2.gif"></asp:ImageButton>
      </ItemTemplate>
      </asp:TemplateField>

       <asp:TemplateField>
       <ItemTemplate>
       <asp:CheckBox Visible="false" ID="chckBoxDelete" ItemStyle-CssClass="alignmentLeft" class="deleteChkBox" ClientIDMode="Static" runat="server" />
       </ItemTemplate>
       </asp:TemplateField>
 <asp:TemplateField>
       <ItemTemplate>
       <asp:HiddenField ID="uploadStatus" Value="Status" runat="server" />
       </ItemTemplate>
       </asp:TemplateField>
       <asp:BoundField DataField="FileID" Visible="false" />
 </Columns>
       </asp:GridView>

      <div id="UploadControl1">
      <asp:Button ID="Button17" runat="server" Style="display: none;" />            
            <asp:ModalPopupExtender ID="ModalPopupUploadControl" BehaviorID="ModalPopupUploadControl" runat="server" CancelControlID="ImageButton4"
                TargetControlID="btnAddFiles" PopupControlID="Panel5" PopupDragHandleControlID="PopupHeader"
                Drag="true" BackgroundCssClass="Overlay">
                <Animations>         
                    <OnShown>
                        <FadeIn Duration=".50" Fps="10" />            
                    </OnShown>
                </Animations>
            </asp:ModalPopupExtender>
                  <asp:Panel ID="Panel5" runat="server" class="PopUpPanel"
            style="display: none;overflow:hidden; height:100px; width:300px;"><!---unique css-->
                <asp:Panel ID="panel7" runat="server" class="closeButton">
                    <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/images/cross.png"
                         />
                </asp:Panel>
<div id="uploadControl" class="all">
                <div></div>
<asp:FileUpload ID="uploadingFiles" ClientIDMode="Static" runat="server" class="all" style="display:none;" /><br /><br />
                <asp:ImageButton ID="imgBtnAddFile" ClientIDMode="Static" runat="server" ImageUrl="~/images/addToGrid.jpg" OnClick="btnAddToList_Click" style="Display:none;" class="all"/>
                </div>
<div>
                    &nbsp;</div>
</asp:Panel>
        </div>

    </ContentTemplate>
    <Triggers>
    <asp:PostBackTrigger ControlID="imgBtnAddFile" />
        <asp:AsyncPostBackTrigger ControlID="gvUploadFiles" EventName="RowCommand" />

    </Triggers>

    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="gvUploadFiles" EventName="RowCommand" />
    </Triggers>

    </asp:UpdatePanel>

    <asp:UpdateProgress ID="testing" DisplayAfter="0" AssociatedUpdatePanelID="updtPanel" runat="server">
    <ProgressTemplate>


     <div style=" left:0px; top:0px; position:fixed; width:100%; height:100%;
                     background-color:White;    filter:alpha(opacity=90);opacity:0.9;">

    <asp:Image ID="Image2" style="margin-left:500px; margin-top:300px;" ImageUrl="~/images/ajax-loader.gif" runat="server" />


                        </div> 
</ProgressTemplate>
    </asp:UpdateProgress>


      <tr>
        <td align="right"><img src="../images/m7.gif" width="115" height="26" /></td>
      </tr>
    </table>
                </asp:Panel>

                </div>