Диалоговое окно JQuery UI, тоже выделено серым цветом

Я использую диалоговое окно jquery UI для изменения строки данных на веб-сайте ASP.NET. При открытии диалога я добавляю диалог в форму подкладки, это дает мне возможность использовать обратную передачу. $('#' + id).parent().appendTo($("form"));

Но когда я устанавливаю свойство диалога modal: true Не только серый цвет недоступен, диалоговое окно также является серым и недоступным.

Если я удалю $('#' + id).parent().appendTo($("form"));, он работает, как предполагалось, но потом я не могу использовать обратные копии.

Я делаю что-то не так, или мне не хватает точки, чтобы заставить это работать?

Javascript в верхней части .aspx

<script type="text/javascript">
    $(document).ready(function () {

        $('#workDialog').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            width: 800,
            height: "auto",
            modal: true
        });
    });

    function showDialog(id) {
        $('#' + id).parent().appendTo($("form"));
        $('#' + id).dialog("open");
    }

    function closeModalDiv(id) {
        $('#' + id).dialog("close");
    }
</script>

div, содержащий диалог

<div id="workDialog" title="Basic dialog">
    <asp:UpdatePanel ID="upWorkDialog" runat="server" UpdateMode="Conditional">  <ContentTemplate>
        <table id="Table1" class="item">
        <tr>
            ...
        </tr>
        <tr>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
        </tr>
        </table>
        <asp:Label ID="lblWorkEditError" runat="server" Text=""></asp:Label>

        <asp:Button ID="btnSave" runat="server" Text="Gem" OnClick="btnSave_Click" />
        <asp:Button ID="btnCancel" runat="server" Text="Annuller" OnClientClick="javascript:closeModalDiv('workDialog');" />
    </ContentTemplate></asp:UpdatePanel>
</div>

Ответ 1

Это известная ошибка в 1.10.0 и отлично работает в более старых версиях, но я РЕШАЛ ее, изменив z-index для стиля ui-dialog

добавьте следующий стиль в таблицу стилей или на странице

.ui-dialog
{
    z-index: 101;
}

ИЛИ найдите класс .ui-dialog в jquery-ui-1.10.0 css и добавьте "z-index: 101;" стиль стиля

теперь перезагружайте страницу, а IT WORKS...

Ответ 2

Это известная ошибка в 1.10.0. Я решил это, изменив z-индекс для наложения.

$('#workDialog').dialog({
            modal: true,
            width: 400,
            height: 200,
            appendTo: $("form:first")
        });
        var dz = $(".ui-front").css("z-index")
        $(".ui-widget-overlay").css({ "z-index": dz - 1 });
        $(".ui-widget-overlay").appendTo($("form:first"));

Ответ 3

Невозможно переместить диалог после его создания. Я думаю, что самое легкое и лучшее исправление - переместить appendTo в инициализацию диалога.

<script type="text/javascript">
$(document).ready(function () {

    $('#workDialog').dialog({
        autoOpen: false,
        draggable: true,
        resizable: false,
        width: 800,
        height: "auto",
        modal: true,
    appendTo: "#aspnetForm" // moved append to where the dialog i created
    });
});

function showDialog(id) {
    $('#' + id).dialog("open");
}

function closeModalDiv(id) {
    $('#' + id).dialog("close");
}
</script>

Ответ 4

Похоже, что после версии 1.10.0 модальное обходное решение больше не работает. Понижав версию пользовательского интерфейса jQuery до 1.9.2, она должна снова работать.

Ответ 5

Я пробовал, и он должен работать. Не могли бы вы прокомментировать строку

 $('#' + id).parent().appendTo($("form"));

Измените, где вы инициализируете свое диалоговое окно, чтобы взять объект в переменной dlg2

var dlg2 = $("#dialog1").dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    width: 800,
    height: "auto",
    modal: true,
    open: function (type, data) { $(this).parent().appendTo("form"); }
});

Добавьте эту строку сразу после инициализации вашего диалога.

$(dlg2).parent().appendTo($("form"));

Есть ли у вас только один диалог? Вы можете попробовать инициализировать его в объявлении диалога, добавив открытый код:

$("#dialog1").dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    width: 800,
    height: "auto",
    modal: true,
    open: function (type, data) { $(this).parent().appendTo("form"); }
});

Ссылка: диалоговое окно jQuery UI с обратной записью кнопки ASP.NET

Ответ 6

В приведенном ниже коде показано исправление вашей проблемы, работало для меня:

<script type="text/javascript">
    $(document).ready(function () {

        $('#workDialog').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            width: 800,
            height: "auto",
            modal: true,
            appendTo: "form"
        });
    });

    function showDialog(id) {
        $('#' + id).dialog("open");
    }

    function closeModalDiv(id) {
        $('#' + id).dialog("close");
    }
</script>

В jQuery UI v1.10 они добавили свойство appendTo, которое, похоже, делает то же самое, что и вызов .parent(). appendTo ($ ( "form" )). Диалоговое окно появляется поверх серого фона. И Post back работает.

Ответ 7

во второй строке функции showDialog, добавьте набор css для z-индекса. Должно выглядеть так:

function showDialog(id) {
    $('#' + id).parent().appendTo($("form"));
    $('#' + id).dialog("open").css({"z-index":"101"});
}

Ответ 8

Ответ Карстен работал у меня с небольшим изменением. Мне нужно переместить $('#workDialog').dialog... после $(".ui-widget-overlay").appendTo($("form:first"));