控件在jQuery模式对话框中不起作用

Question

I'm using the jquery dialog in my ASP.net web app. Within it I have a user control with some link. When the dialog is in modal mode, the links are not selectable.

I tried the workaround in this post, but it did not work for me.

Update
Added a post to ComponentArt forum here . It seems to be related to the component art TabStrip control. A link in here isn't working correctly, but works outside of the tabstrip. See markup added below:

        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>

Answer 1

摆脱了组件艺术的控制，使自己的控制变得简单得多，并且可以与他人很好地玩耍。

Answer 2

First of all your control's wrapper div <div id="dialog-form" title=""> has no closing tag </div> but it could be a typo here, whatever check this again to make sure that the closing tag </div> is not missing.

But in this dlg.parent().appendTo($('form:first')); line you are trying to append the parent container of <div id="dialog-form" title=""> which is dlg not the dlg itself and I didn't see any parent wrapper of <div id="dialog-form" title=""> in your code, so it could be a problem. In your code the following line means

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

Append the dlg's parent or append the parent div of this( <div id="dialog-form" title=""> )div in to the first form of the page.

If you want to append the dlg which refers to <div id="dialog-form" title=""> in to the first form then you should write

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

or

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

or

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

Answer 3

I guess this should be your answer. See the modal option description. It disables other elements and creates layer over hyperlinks or other form elements. This layer prevents links from working.

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