asp.net toggle button extender and modal popup extender collision

Question

I am currently moving some form fields on an existing webform into a modal popup window using the asp.net toolkit extender. One of the fields uses the toolkit's toggle button extender on a checkbox a works quite well. When I move the checkbox and extender into the modal popup div, the toggle button extender stops working.

After confirming the problem, I decided to try using a jquery plug-in called checkbox that provides the same function. Again this plugin worked as advertised until I moved it into the modal window div. I had hoped to avoid hand rolling a solution.

I am guessing that the problem has something to to with css positioning. I would love to hear possible fixes before I build a solution from scratch.

Edit

Here is my original approach with toggle button extender:

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

I have also now tried placing a hidden field and an image and writing jquery click function. This also results in the same issue (stops working inside modal div).I can get code to run by hard coding onclick event attribute. I would love to understand why and if there are any more elegant ways to work around this. I guess I could try a jquery modal popup plugin, but I didn't plan to rewrite this whole page.

Answer 1

Take a look at your ModalPopupExtender Attributes. TargetControlID and PopupControlID are the same panel "pnlAddTransaction". The TargetControlID is the control that triggers the control at PopupControlID to display.