Как я могу показать два modalpopup на одной странице?

ProgramBox

Как я могу показать два modalpopup на одной странице?

Post author:admin
Запись опубликована:17 апреля, 2023
Post category:Вопросы по программированию

#asp.net #ajaxcontroltoolkit

Вопрос:

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

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

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

Есть какие-нибудь идеи.

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

 <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>
                            amp;nbsp;amp;nbsp;amp;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>
                            amp;nbsp;amp;nbsp;amp;nbsp;
                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td style="height: 27px">
                            amp;nbsp;amp;nbsp;amp;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">
                            amp;nbsp;amp;nbsp;amp;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>

Есть какие-нибудь предложения.?

1. Можете ли вы опубликовать свой код? Возможно наличие двух на одной странице, обычно это вызвано дублированием идентификатора

2. Вы указываете идентификатор при их отображении или ссылаетесь на них, возможно, по классу?

3. Нет, когда я хочу их показать, я указываю соответствующий идентификатор.

Ответ №1:

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

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

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

Ответ №2:

Вам нужен обходной путь.

Установите ваш второй удлинитель на фиктивную кнопку.

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

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

   MDE_Edit.Show();

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

2. Когда я помещаю . Show() в моей функции отображаются оба модальных окна, одно на другом.

Ответ №3:

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

 TargetControlID="btnHiddenComment"

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

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

Ответ №4:

У меня были похожие проблемы с несколькими элементами управления ModalPopupExtender на одной странице. В конечном итоге решение, к которому я пришел, заключалось в том, чтобы на моей главной странице был только один ModalPopupExtender и связанная с ним всплывающая панель управления. Панель, с которой связан ModalPopupExtender через атрибут PopupControlID, содержит элемент управления label, на который можно ссылаться из других областей вашего кода. Всякий раз, когда мне нужен элемент управления на странице для вызова всплывающей панели, у меня просто есть элемент управления (кнопка, изображение и т.д.), вызывающий метод 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, что просто увеличивает размер вашей страницы.сделал

Ответ №5:

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

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