Как я могу показать два модалпопупа на одной странице? - PullRequest
2 голосов
/ 13 июня 2011

Я использую два модалпопупексендера на одной и той же странице контента, проблема в том, что когда я показываю один, оба они показываются один на другом.

Я использовал разные идентификаторы для модалпопапов и панелей, но проблема сохраняется.

Я использую мастер-страницу и помещаю свои модальные сообщения на страницу контента.

Любые идеи.

Вот исходный код:

<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>

Любые предложения .?

Ответы [ 5 ]

2 голосов
/ 13 июня 2011

Я думаю, что ваша проблема с BehaviorID.

Для обоих ModalPopupExtender вы должны назначить уникальный BehaviorID.BehaviorID Должно быть различным для нескольких ModalPopupExtender

Надеюсь, это поможет вам.

1 голос
/ 13 июня 2011

Требуется обходной путь.

Установите для второго экстендера фиктивную кнопку.

 <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" />

И покажите ее в нажатой кнопке (так, чтобы кнопка пустышки не была), где вы хотитечтобы показать это:

  MDE_Edit.Show();
0 голосов
/ 21 января 2016

Это решение, которое я пробовал, и оно работает для меня.

        <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>

это код этой стороны:

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();
}
0 голосов
/ 28 ноября 2011

У меня были похожие проблемы с несколькими элементами управления ModalPopupExtender на одной странице. В конце концов, решение, которое я придумал, состояло в том, чтобы на моей главной странице был только один ModalPopupExtender и связанная всплывающая панель управления. Панель, с которой связан ModalPopupExtender через атрибут PopupControlID, содержит элемент управления меткой, на который можно ссылаться из других областей вашего кода. Всякий раз, когда мне нужен элемент управления на странице для вызова всплывающей панели, у меня просто есть элемент управления (кнопка, изображение и т. Д.), Вызывающий метод show ModalPopupExtender из кода позади.

Например, вот моя разметка для расширителя и панели на главной странице:

<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> 

Обратите внимание, как я использую эту фиктивную кнопку для назначения экстендеру через атрибут TargetControlId:

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

Эта кнопка скрыта с помощью css. Сама кнопка ничего не делает, кроме того, что является маркером, который требуется экстендеру для правильной работы.

Теперь вот мой код, который вызывается из кода после нажатия кнопки отправки:

    /// <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();
            }
        }
    }

Используя этот подход, я могу повторно использовать один и тот же ModalPopupExtender (и связанную всплывающую панель cotnrol), обращаясь к нему / манипулируя им из различных элементов управления на моей странице. Это также позволяет избежать использования нескольких элементов управления ModalPopupExtender, что просто увеличивает размер вашей страницы.did

0 голосов
/ 13 июня 2011

Я бы попробовал изменить

TargetControlID="btnHiddenComment"

второго всплывающего экстендера на новую скрытую кнопку с другим идентификатором.

В противном случае оба экстендера нацелены на один и тот же элемент управления

...