javascript - Controls not functioning in jquery modal dialog

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>

score 1 · Accepted Answer

コンポーネントアートコントロールを取り除き、はるかにシンプルで他のユーザーとうまく連携できる独自のコントロールを作成しました。

score 0 · Accepted Answer

まず、コントロールのラッパー div<div id="dialog-form" title="">には終了タグ</div>がありませんが、ここではタイプミスである可能性があります。これをもう一度チェックして、終了タグ</div>が欠落していないことを確認してください。

しかし、この行では、それ自体ではなくofdlg.parent().appendTo($('form:first'));を追加しようとしていますが、コードに親ラッパーが表示されなかったため、問題になる可能性があります。あなたのコードでは、次の行はparent container<div id="dialog-form" title=""> which is dlgdlg<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);

score -1 · Accepted Answer

これがあなたの答えであるべきだと思います。モーダルオプションの説明を参照してください。他の要素を無効にし、ハイパーリンクまたは他のフォーム要素の上にレイヤーを作成します。このレイヤーにより、リンクが機能しなくなります。

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

javascript - Controls not functioning in jquery modal dialog

3 に答える 3

Related

Reference