0

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>

4

3 回答 3

1

got rid of the component art control and made my own which was much simpler and plays well with others.

于 2012-08-23T16:25:11.443 回答
0

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);
于 2012-07-05T23:23:46.830 回答
-1

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

于 2012-07-05T21:09:39.317 回答