asp.net切换按钮扩展器和模态弹出扩展器碰撞

时间:2010-01-07 15:19:55

标签: asp.net jquery asp.net-ajax

我目前正在使用asp.net工具包扩展程序将现有webform上的某些表单字段移动到模式弹出窗口中。其中一个字段在复选框上使用工具包的切换按钮扩展器非常有效。当我将复选框和扩展器移动到模态弹出窗口div时,切换按钮扩展器停止工作。

确认问题后,我决定尝试使用名为checkbox的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点击功能。这也会导致同样的问题(停止在modal div中工作)。我可以通过硬编码onclick事件属性来运行代码。我很想知道为什么以及是否有更优雅的方法来解决这个问题。我想我可以尝试一个jquery模式弹出插件,但我不打算重写整个页面。

1 个答案:

答案 0 :(得分:0)

查看您的ModalPopupExtender属性。 TargetControlID和PopupControlID是相同的面板“pnlAddTransaction”。 TargetControlID是触发PopupControlID控件显示的控件。