asp.net toggle button extender и modal popup extender collision

Question

В настоящее время я перемещаю некоторые поля формы на существующую веб-форму в модальное всплывающее окно с помощью расширителя инструментария asp.net. В одном из полей используется переключатель кнопки переключателя инструментария на флажке, который работает достаточно хорошо. Когда я перемещаю флажок и расширитель в модальный всплывающий div, расширитель кнопки переключения перестает работать.

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

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

Редактировать

Вот мой оригинальный подход с кнопкой переключения удлинителя:

<!-- works fine here --> 
<asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" /> 
<ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server" 
    TargetControlID="chkUSDAdd" 
    CheckedImageAlternateText="Click here to enter price in CAD" 
    UncheckedImageAlternateText="Click here to enter price in USD" 
    UncheckedImageUrl="~/images/ButtonCAD.gif" 
    CheckedImageUrl="~/images/ButtonUSD.gif" /> 

<asp:Panel ID="pnlAddTransaction" runat="server" Width="600px" Height="300px" CssClass="ModalWindow"> 

    <!-- doesn't work here - outside UpdatePanel but inside modal window div--> 

    <asp:UpdatePanel ID="udpAddTransaction" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional"> 
     <ContentTemplate> 

     <!-- This is the desired location but doesnt work here --> 
     <asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" /> 
     <ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server" 
      TargetControlID="chkUSDAdd" 
      CheckedImageAlternateText="Click here to enter price in CAD" 
      UncheckedImageAlternateText="Click here to enter price in USD" 
      UncheckedImageUrl="~/images/ButtonCAD.gif" 
      CheckedImageUrl="~/images/ButtonUSD.gif" /> 

     <!-- etc--> 

     </ContentTemplate> 
     <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="hdnInvestmentID" /> 
     </Triggers> 
    </asp:UpdatePanel> 
<asp:Panel> 
<ajaxToolkit:ModalPopupExtender ID="mpeAddTransaction" runat="server" 
    TargetControlID="pnlAddTransaction" PopupControlID="pnlAddTransaction" 
    CancelControlID="btnCancel" OnCancelScript="hideAddTransactionPopup()" 
    BackgroundCssClass="modalBackground" /> 

Я теперь также попытался поместить скрытое поле и функцию JQuery Нажмите на изображение и записи. Это также приводит к одной и той же проблеме (перестает работать внутри модального div). Я могу получить код для запуска с помощью жесткого кодирования атрибута события onclick. Я хотел бы понять, почему и если есть более элегантные способы обойти это. Наверное, я мог бы попробовать jQuery модальный всплывающий плагин, но я не планировал переписывать всю эту страницу.

Answer 1

Взгляните на свои атрибуты ModalPopupExtender. TargetControlID и PopupControlID являются одной и той же панелью «pnlAddTransaction». TargetControlID - это элемент управления, запускающий элемент управления в PopupControlID для отображения.