같은 페이지에 두 개의 modalpopup을 표시하려면 어떻게해야합니까?

Question

동일한 콘텐츠 페이지에서 두 개의 modalpopupextenders를 사용하고 있습니다. 하나를 표시 할 때 문제가 발생하며 둘 다 서로간에 표시됩니다.

modalpopup 및 패널에 다른 ID를 사용했지만 문제가 지속됩니다.

마스터 페이지를 사용하고 있으며 콘텐츠 페이지에 내 modalpopup을 넣을 것입니다.

모든 아이디어.

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

어떤 제안 : 여기

는 소스 코드입니다.?

Answer 1

BehaviorID으로 문제가 있다고 생각합니다.

모두 ModalPopupExtender의 경우 고유 BehaviorID을 할당해야합니다. BehaviorID 복수로 구분해야 함 ModalPopupExtender

희망이 있으면 도움이 될 것입니다.

Answer 2

나는 다른 ID로 새로운 숨겨진 버튼에 두 번째 팝업 익스텐더의

TargetControlID="btnHiddenComment" 

을 변경하려고 할 것입니다.

그렇지 않으면 두 확장자 모두 동일한 컨트롤을 대상으로합니다.

Answer 3

해결 방법이 필요합니다.

두 번째 익스텐더를 더미 버튼으로 설정하십시오.

<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 버튼)에서 그것을 보여 나도 같은 페이지에 여러 ModalPopupExtender 컨트롤이 비슷한 문제를 했어

MDE_Edit.Show(); 

Answer 4

. 결국 내가 생각해 낸 해결책은 내 마스터 페이지에 하나의 ModalPopupExtender 및 관련 팝업 컨트롤 패널을 설치하는 것이 었습니다. ModalPopupExtender가 PopupControlID 특성을 통해 연결된 패널에는 코드의 다른 영역에서 참조 할 수있는 레이블 컨트롤이 포함되어 있습니다. 페이지에서 팝업 패널을 호출하는 컨트롤이 필요할 때마다 컨트롤 (단추, 이미지 등)이 ModalPopupExtender의 show 메서드를 코드에서 호출하도록합니다.

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

:이 더미 버튼을 사용하는 방법

<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 속성을 통해 연장에 할당 할 : 예를 들어

, 여기에 마스터 페이지에서 확장 및 패널 내 마크 업입니다

이 버튼은 CSS를 통해 숨겨져 있습니다. Extender가 제대로 기능하기 위해 필요한 마커가 아닌, 버튼 자체는 아무 것도하지 않습니다.이제

는, 여기에 제출 버튼을 클릭하면 뒤에 코드에서 호출 내 코드입니다 :

/// <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 컨트롤을 사용하지 않아도 페이지 크기가 커집니다.

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