控件在 jquery 模式对话框中不起作用答案

【问题标题】：Controls not functioning in jquery modal dialog控件在 jquery 模式对话框中不起作用
【发布时间】：2012-08-24 00:25:11
【问题描述】：

我在我的 ASP.net Web 应用程序中使用 jquery 对话框。在其中我有一个带有一些链接的用户控件。当对话框处于模态模式时，链接不可选。

我在this 帖子中尝试了解决方法，但它对我不起作用。

更新
在 ComponentArt 论坛here 上添加了一个帖子。它似乎与组件艺术 TabStrip 控件有关。此处的链接无法正常工作，但可以在标签条之外工作。请参阅下面添加的标记：

        var dlg = $("#dialog-form").dialog({
            autoOpen: false,
            height: 650,
            width: 700,
            modal: true,
            buttons: {

                close: function () {
                    $(this).dialog("close");
                }
            }
        });

        dlg.parent().appendTo($('form:first'));

<div id="dialog-form" title="">
<ComponentArt:tabstrip runat="server"
                          CssClass="TopGroup"
                          SiteMapXmlFile="../UserControls/AppDetailsTabData.xml"
                          DefaultItemLookId="DefaultTabLook"
                          DefaultSelectedItemLookId="SelectedTabLook"
                          DefaultDisabledItemLookId="DisabledTabLook"
                          DefaultGroupTabSpacing="1"
                          ImagesBaseUrl="../App_Themes/Default/Tab/images/"
                          MultiPageId="MultiPage1"
                          runat="server">
    <ItemLooks>
        <ComponentArt:ItemLook LookId="DefaultTabLook" CssClass="DefaultTab" HoverCssClass="DefaultTabHover" LabelPaddingLeft="10" LabelPaddingRight="10" LabelPaddingTop="5" LabelPaddingBottom="4" LeftIconUrl="tab_left_icon.gif" RightIconUrl="tab_right_icon.gif" HoverLeftIconUrl="hover_tab_left_icon.gif" HoverRightIconUrl="hover_tab_right_icon.gif" LeftIconWidth="3" LeftIconHeight="21" RightIconWidth="3" RightIconHeight="21" />
        <ComponentArt:ItemLook LookId="SelectedTabLook" CssClass="SelectedTab" LabelPaddingLeft="10" LabelPaddingRight="10" LabelPaddingTop="4" LabelPaddingBottom="4" LeftIconUrl="selected_tab_left_icon.gif" RightIconUrl="selected_tab_right_icon.gif" LeftIconWidth="3" LeftIconHeight="21" RightIconWidth="3" RightIconHeight="21" />
    </ItemLooks>

</ComponentArt:tabstrip>

<ComponentArt:MultiPage id="MultiPage1" CssClass="MultiPage" runat="server">
    <ComponentArt:PageView CssClass="PageContent" runat="server">

        <a href="www.google.com">click me</a>

    </ComponentArt:PageView>

    <ComponentArt:PageView CssClass="PageContent" runat="server">

    </ComponentArt:PageView>

</ComponentArt:MultiPage>

【问题讨论】：

标签： javascript jquery asp.net jquery-dialog componentart

【解决方案1】：

摆脱了组件艺术控制，我自己制作了它，它更简单，并且与其他人一起玩得很好。

【讨论】：

【解决方案2】：

首先，您的控件的包装器 div <div id="dialog-form" title=""> 没有结束标记 </div> 但这里可能是错字，请再次检查以确保结束标记 </div> 没有丢失。

但是在这个dlg.parent().appendTo($('form:first')); 行中，您尝试附加<div id="dialog-form" title=""> which is dlg 的parent container 而不是dlg 本身，我没有在您的代码中看到<div id="dialog-form" title=""> 的任何父包装器，所以它可能是一个问题。在您的代码中，以下行表示

`dlg.parent().appendTo($('form:first'));`

附加 dlg 的父级或附加 this(<div id="dialog-form" title="">)div 的父级 div 到页面的第一个表单中。

如果你想将dlg（指的是<div id="dialog-form" title="">）附加到第一个表单中，那么你应该写

dlg.appendTo($('form:first'));

或

$('form:first').append(dlg);

或

$($('form')[0]).append(dlg);

【讨论】：

【解决方案3】：

我想这应该是你的答案。请参阅模态选项说明。它禁用其他元素并在超链接或其他表单元素上创建层。该层阻止链接工作。

http://jqueryui.com/demos/dialog/#modal-message

【讨论】：

请放一个 JSFiddle 链接或现场演示链接，它会有所帮助！