How can I show two modalpopup in the same page?

I am using two modalpopupextenders in the same content page, the problem is when I show one , both of them are shown one on the other.

I have used different id for the modalpopups and panels but the problem persists.

I am using a Master Page and I am putting my modalpopups in the content page.

Any Ideas.

Here is the source code :

<ajaxToolkit:ModalPopupExtender ID="mpeComment" runat="server" TargetControlID="btnHiddenComment"
    PopupControlID="pnlComment" CancelControlID="Button1" OkControlID="btnHiddenComment"
    BackgroundCssClass="modalBackground" PopupDragHandleControlID="CommentCaption"
    Drag="True" DynamicServicePath="" Enabled="True">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlComment" runat="server" Style="display: none; background-color: #f5f5f5;
    border: solid 3px #B8B8B8;" Width="500px">
    <asp:Panel ID="CommentCaption" runat="server" Style="padding-bottom: 10px; cursor: move;
        height: 30px;">
        <table class="content_titre" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center" valign="top">
                    <asp:Label ID="lblTitre" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </asp:Panel>
    <table class="modalComment" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2" style="height: 80px;" align="center" valign="top">
                <table>
                    <tr>
                        <td>
                            &nbsp;&nbsp;&nbsp;
                        </td>
                        <td>
                            <span style="color: #F58076; font-size: 11px;">
                                <asp:Label ID="LblErreur" runat="server"></asp:Label></span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr align="center">
            <td align="center">
                <asp:Button ID="btnHiddenComment" runat="server" Style="display: none" />
                <asp:Button ID="Button1" runat="server" Style="display: none" />
            </td>
            <td align="center">
                <div class="login_button" style="width: 100px;">
                    <asp:Button ID="btnCancelComment" runat="server" CausesValidation="False" Width="100px"
                        Text="OK" PostBackUrl="ValidationDOC.aspx" />
                </div>
            </td>
        </tr>
    </table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpeDemandeAvalider" runat="server" TargetControlID="btnHiddenComment"
    PopupControlID="pnlDemandeAvalider" CancelControlID="Button1" OkControlID="btnHiddenComment"
    BackgroundCssClass="modalBackground" PopupDragHandleControlID="Panel1"
    Drag="True" DynamicServicePath="" Enabled="True">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlDemandeAvalider" runat="server" Style="display: none; background-color: #f5f5f5;
    border: solid 3px #B8B8B8;">
    <asp:Panel ID="Panel1" runat="server" Style="padding-bottom: 10px; cursor: move;
        height: 30px;">
        <table class="content_titre" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center" valign="top">
                    <asp:Label ID="Label3" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </asp:Panel>
    <table class="modalComment" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2" style="height: 80px;" align="center" valign="top">
                <table>
                    <tr>
                        <td>
                            &nbsp;&nbsp;&nbsp;
                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td style="height: 27px">
                            &nbsp;&nbsp;&nbsp;<img alt="" src="../../Ressources/images/navig/puce-blue.gif" /><span
                                style="color: #133880; font-size: 11px;"> Statut :</span>
                        </td>
                        <td height="27px" align="left">
                            <asp:DropDownList ID="DDLstatutPopup" runat="server" AppendDataBoundItems="True">
                                <asp:ListItem Value="-1">.:: Veuillez sélectionner une action de validation ::.</asp:ListItem>
                            </asp:DropDownList>

                        </td>
                    </tr>
                    <tr>
                        <td style="height: 27px">
                            &nbsp;&nbsp;&nbsp;<img alt="" src="../../Ressources/images/navig/puce-blue.gif" /><span
  开发者_如何学编程                              style="color: #133880; font-size: 11px;"> Motif :</span>
                        </td>
                        <td height="27px">
                            <asp:TextBox ID="txtPopUpMotif" runat="server" TextMode="MultiLine" Width="730px"
                                Height="64px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr align="center">

                <asp:Button ID="Button2" runat="server" Style="display: none" />
                <asp:Button ID="Button3" runat="server" Style="display: none" />

            <td align="center">
                <div class="login_button" style="width: 100px;">
                    <asp:Button ID="btnPopUpOK" runat="server" CausesValidation="False" Width="100px"
                        Text="OK" OnClick="OnValidateMulti" PostBackUrl="ValidationDOC.aspx" />
                </div>
            </td>
            <td align="center">
            <div class="login_button" style="width: 100px;">
                <asp:Button ID="btnPopUpAnnuler" runat="server" CausesValidation="False" Width="100px"
                    Text="Annuler" OnClick="OnCancel" />
                    </div>
            </td>
        </tr>
    </table>
</asp:Panel>

Any suggestions.?

I think your problem with BehaviorID.

For both ModalPopupExtender you should assign unique BehaviorID. BehaviorID Must be differen for multiple ModalPopupExtender

Hope it will help for you.

You need to a workaround.

Set your second extender to a dummy button.

 <asp:Button ID="Button_dummy" Style="display: none" runat="server" Text="Button" />
 <cc1:ModalPopupExtender ID="MDE_Edit" DropShadow="true" runat="server" 
    TargetControlID="Button_dummy"
    PopupControlID="Panel_edit" BackgroundCssClass="popProfBack" />

And show it in the button clicked (so no the dummmy button) where you want to show it:

  MDE_Edit.Show();

I would try changing

TargetControlID="btnHiddenComment"

of the second popup extender to a new hidden button with a different ID.

Otherwise both extenders are targetting the same control

I've had similar problems with multiple ModalPopupExtender controls on the same page. Eventually the solution I came up with was to just have one ModalPopupExtender, and related popup control panel, in my master page. The panel that the ModalPopupExtender is associated with, via the PopupControlID attribute, contains a label control, which can be referenced from other areas in your code. Whenever I need a control on the page to invoke a popup panel, I just have the control (button, image, etc.) call the ModalPopupExtender's show method from code behind.

For example, here is my markup for the extender and panel in the master page:

<asp:Button ID="btnPopupInvoker" runat="server" style="display: none" />

<asp:ModalPopupExtender ID="modalPopupExtender" runat="server"
    OkControlId="btnPopupOk" TargetControlId="btnPopupInvoker" 
    PopupControlId="pnlPopup" BackgroundCssClass="modalPopupBG"/>

<% // Broken rules popup %>
<asp:panel class="popupConfirmation" ID="pnlPopup" style="display: none;" runat="server">
    <div class="popupContainer">
        <div class="popupTitleBar" id="divPopupHeader">
            <div>
                <asp:Label ID="lblPopupTitle" runat="server" />
            </div>
        </div>
        <div class="popupBody">
            <div>
                <asp:Label ID="lblPopupBody" runat="server" />
            </div>
        </div>
        <div class="popupButtons">
            <div>
                <asp:Button ID="btnPopupOk" runat="server" Text="Close" />
            </div>
        </div>
    </div>
</asp:panel> 

Notice how I use this dummy button to assign to the extender through the TargetControlId attribute:

<asp:Button ID="btnPopupInvoker" runat="server" style="display: none" />

This button his hidden via css. The button itself doesn't do anything, aside from being a marker that the extender requires in order to function properly.

Now, here is my code that is invoked from code behind when the submit button is clicked:

    /// <summary>
    /// Loops through all the broken rules and displays them in a popup panel.
    /// </summary>
    /// <param name="rules">Broken rules collection.</param>
    protected void DisplayBrokenRules(BrokenRulesCollection rules)
    {
        Label titleLabel = Master.FindControl("lblPopupTitle") as Label;

        if (titleLabel != null)
        {
            titleLabel.Text = Properties.StringLibrary.Label_BrokenRulesPopupTitle;
        }

        Label bodyLabel = Master.FindControl("lblPopupBody") as Label;

        if (bodyLabel != null)
        {
            bodyLabel.Text = string.Empty;

            foreach (BrokenRule rule in rules)
            {
                bodyLabel.Text += String.Concat(rule.Description, "<br />");
            }

            ModalPopupExtender mpe = Master.FindControl("modalPopupExtender") as ModalPopupExtender;

            if (mpe != null)
            {
                mpe.Show();
            }
        }
    }

Using this approach I can reuse the same ModalPopupExtender (and associated popup cotnrol panel) by accessing/manipulating it from various controls on my page. This also avoids having multiple ModalPopupExtender controls, which just increases the size of your page.did

This is the solution I had try and it works for me.

        <cc1:toolkitscriptmanager id="ToolkitScriptManager1" runat="server">

        </cc1:toolkitscriptmanager>
                <asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>

                <cc1:modalpopupextender id="ModalPopupExtender1" runat="server" backgroundcssclass="modalBackground"
                    behaviorid="mpe" cancelcontrolid="btnHide" popupcontrolid="pnlPopup" targetcontrolid="lnkDummy">
        </cc1:modalpopupextender>


        <!-- daftar-->
        <asp:Panel ID="pnlPopup" runat="server" CssClass="col-xs-6" Style="display: none;">

            <div class="modal-content">
              <div class="modal-header">

                <h4>Pendaftaran</h4>

              </div>
              <div class="modal-body" style="">


              </div>
              <div class="modal-footer">
                <asp:Button ID="btnHide" runat="server" Cssclass="btn btn-danger" Text="Tutup" />
              </div>
            </div>
        </asp:Panel>
        <!-- daftar-->
        <!-- Log masuk-->
        <asp:Panel ID="panelLogmasuk" runat="server" CssClass="col-xs-6" Style="display: none;">

            <div class="modal-content">
              <div class="modal-header">

                <h4>Log masuk</h4>

              </div>
              <div class="modal-body" style="">
              log masuk
              </div>
              <div class="modal-footer">
                <asp:Button ID="Button3" runat="server" Cssclass="btn btn-danger" Text="Tutup" />
              </div>
            </div>
        </asp:Panel>

this this the back end code :

protected void BTNdaftar_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.PopupControlID = "pnlPopup";
    ModalPopupExtender1.Show()
}
protected void BTNLogmasuk_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.PopupControlID = "panelLogmasuk";
    ModalPopupExtender1.Show();
}