modal popup extender not showing panel on button click

Question

I'm trying to use a modal popup extender on my page so when I click a button, it must show a panel. Here is what I have:

    <asp:UpdatePanel runat="server" ID="updPanel">
    <ContentTemplate>
        <ajaxToolkit:ModalPopupExtender ID="mpeEmailComplete" runat="server" TargetControlID="btnTesting"
            PopupControlID="pnl" OkControlID="btnOk"
             BackgroundCssClass="modalBackground">
        </ajaxToolkit:ModalPopupExtender>



        <asp:Panel ID="pnl" runat="server" style="display:none;">
            <asp:UpdatePanel ID="udp" runat="server">
                <ContentTemplate>
                    <asp:Panel runat="server" ID="pnlEmailComplete" Visible="false">
                        <asp:Label runat="server" ID="lblTest" Text="Testing testing testing"></asp:Label>
                        <asp:Button runat="server" ID="btnOk" Text="OK" />
                    </asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>


        <asp:Button runat="server" ID="btnTesting" Text="Testing"/>

    </ContentTemplate>
</asp:UpdatePanel>

but i can't get the panel to popup when the button is clicked. Anybody know why?

Solution

Your innermost panel has Visible=false.

<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false">  *(change here)*

So, when you press the TESTING button, the ModalPopupExtender correctly causes the outer panel to display, but it's displaying an invisible inner panel, hence you see nothing on screen.

<asp:Panel ID="pnl" runat="server" style="display:none;">  *(this is ok)*

To fix, just yank the Visible=false from the outer panel (pnlEmailComplete)

Hope that helps!