Asp.NET Ajax ModalPopupExtender not working properly

Question

Hi im trying to prepare a step by step mechanisim for my website. First of all ajax modal popup and update panel combination is so complex, can't get it working.. Here's some of my code..

<asp:Button ID="fakeButton" runat="server" Style="display: none;" Text="" />
<asp:Button ID="fakeButton2" runat="server" Style="display: none;" Text="" />
<asp:Button ID="fakeButton3" runat="server" Style="display: none;" Text="" />

This is one of the modal windows:

 <ajax:ModalPopupExtender ID="mpeOrder2" runat="server" PopupControlID="pnlOrder2" TargetControlID="fakeButton3"
        BackgroundCssClass="modalBackground">
    </ajax:ModalPopupExtender>
    <asp:Panel ID="pnlOrder2" runat="server" CssClass="modalPopup" Style="display: none">
        <asp:UpdatePanel style="text-align: right" ID="updatePanel6" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
            <ContentTemplate>
                <div class="header">Modal - 2</div>
                <div class="body">
                    <div class="footer" align="right">
                        <table>
                            <tr>
                                <td>
                                    <asp:Button ID="btnToStepOne" runat="server" OnClick="btnToStepOne_OnClick" Text="Back" CssClass="orderNo" />
                                </td>
                                <td>
                                    <asp:Button ID="btnToStepThree" OnClick="btnToStepThree_OnClick" runat="server" Text="Next" CssClass="yes" />
                                </td>
                            </tr>
                        </table>
                    </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>

CodeBehind:

protected void btnToStepOne_OnClick(object sender, EventArgs e)
{
    mpeOrder2.Hide();
    mpeOrder.Show();
}

 protected void btnToStepThree_OnClick(object sender, EventArgs e)
{
    mpeOrder2.Hide();
    mpeOrder3.Show();
}

And the others are the same of these codes. When i click my first component to open first modal popup, it works. Then i click next it works again. But after that when i click next again to see my third modal popup every popup disappeared, or i click randomly the next and show buttons modalpopups open all together and one above the other...This is sick..

None of these modals are in an update panel. As you can see only panels got their own update panels. Also im using

<ajax:ToolkitScriptManager EnableScriptLocalization="true" EnablePartialRendering="true" EnableScriptGlobalization="true"
            ID="ToolkitScriptManager1" AsyncPostBackTimeout="36000" runat="server" />

Any help would be appreciated.

Thanks.

Answer 1

I solved it after a few hours....

I forgot to close my body div inside the panel, that's why its getting nested. When i close my body div everything worked fine.

<ajax:ModalPopupExtender ID="mpeOrder2" runat="server" PopupControlID="pnlOrder2" TargetControlID="fakeButton3"
        BackgroundCssClass="modalBackground">
    </ajax:ModalPopupExtender>
    <asp:Panel ID="pnlOrder2" runat="server" CssClass="modalPopup" Style="display: none">
        <asp:UpdatePanel style="text-align: right" ID="updatePanel6" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
            <ContentTemplate>
                <div class="header">Modal - 2</div>
                <div class="body">FINALLY</div>
                    <div class="footer" align="right">
                        <table>
                            <tr>
                                <td>
                                    <asp:Button ID="btnToStepOne" runat="server" OnClick="btnToStepOne_OnClick" Text="Back" CssClass="orderNo" />
                                </td>
                                <td>
                                    <asp:Button ID="btnToStepThree" OnClick="btnToStepThree_OnClick" runat="server" Text="Next" CssClass="yes" />
                                </td>
                            </tr>
                        </table>
                    </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>