В модальном диалоге jquery не работают элементы управления

Я использую диалог jquery в моем веб-приложении ASP.net. Внутри него у меня есть пользовательский элемент управления с некоторой ссылкой. Когда диалог находится в модальном режиме, ссылки недоступны для выбора.

Я попробовал обходной путь в этом посте, но он не работал для меня.

Обновить
Добавил пост в форум ComponentArt здесь. Похоже, что это связано с искусством компонента 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>

Источник

3 ответа

Решение

Избавился от компонента art art control и сделал свой собственный, который был намного проще и хорошо сочетался с другими.

Источник

Прежде всего, div вашего элемента управления <div id="dialog-form" title=""> не имеет закрывающего тега </div> но это может быть опечатка здесь, что бы проверить это еще раз, чтобы убедиться, что закрывающий тег </div> не пропал.

Но в этом dlg.parent().appendTo($('form:first')); линия, которую вы пытаетесь добавить parent container из <div id="dialog-form" title=""> which is dlg не dlg сам, и я не видел родительской обертки <div id="dialog-form" title=""> в вашем коде, так что это может быть проблемой. В вашем коде значит следующая строка

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

Добавить родителя dlg или добавить родительский div этого (<div id="dialog-form" title="">) разделитесь на первую форму страницы.

Если вы хотите добавить dlg что относится к <div id="dialog-form" title=""> в первой форме, то вы должны написать

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

или же

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

или же

$($('form')[0]).append(dlg);
Источник

Я думаю, это должен быть ваш ответ. Смотрите описание модальной опции. Он отключает другие элементы и создает слой поверх гиперссылок или других элементов формы. Этот слой не позволяет ссылкам работать.

http://jqueryui.com/demos/dialog/

Источник
Другие вопросы по тегам