2つのmodalpopupを同じページに表示するにはどうすればよいですか？

Question

同じコンテンツページで2つのmodalpopupextendersを使用していますが、問題を表示すると、両方が表示されます。

modalpopupsとパネルに異なるidを使用しましたが、問題は解決しません。

私はマスターページを使用しています。コンテンツページに私のmodalpopupsを入れています。

すべてのアイデア。

<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を持つ新しい隠しボタンに2つ目のポップアップエクステンダの

TargetControlID="btnHiddenComment" 

を変更しようとするだろう。

また、両方のエクステンダが同じコントロールをターゲットにしています。

Answer 3

回避策が必要です。

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ボタン）でそれを示しています。私は、同じページに複数のModalPopupExtender・コントロールと同様の問題を持っていた

MDE_Edit.Show(); 

Answer 4

。最終的に私が思いついた解決策は、私のマスターページに1つのModalPopupExtenderと関連するポップアップコントロールパネルを用意することでした。 ModalPopupExtenderがPopupControlID属性を介して関連付けられているパネルには、コード内の他の領域から参照できるラベルコントロールが含まれています。ポップアップパネルを呼び出すためにページ上のコントロールが必要なときは、コントロール（ボタン、イメージなど）でコードの背後からModalPopupExtenderのshowメソッドを呼び出すだけです。例えば

は、ここでのマスターページでエクステンダーとパネルのための私のマークアップです：私はTargetControlId属性によってエクステンダーに割り当てるには、このダミーのボタンを使用する方法

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

お知らせ：

<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コントロールを使用することが回避され、ページのサイズが大きくなります。

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