jquery ui - проблемы с z-индексами вложенного диалога - PullRequest
5 голосов
/ 02 декабря 2011

У меня есть диалоговое окно с таблицей, и когда я нажимаю кнопку «Удалить», я выхожу в другое диалоговое окно, чтобы запросить подтверждение.В настоящее время это работает нормально в первый раз, но если я нажимаю кнопку «Удалить» во второй раз, диалоговое окно удаления отображается позади первого диалогового окна таблицы, поэтому оно фактически невидимо для пользователя.

Я пытался установить z-index для обоих диалогов, но я не знаю, почему он работает только в первый раз

Ниже приведен пример моего сценария:

   // The 1st dialog
   var $detaildialog = $('#tableplaceholder').dialog({
        autoOpen: false,
        modal: true,
        width: '800',
        height: 'auto'

    });
   // Some steps to set the url.. then open the dialog
   $detaildialog.load(url, function () {

            $('#loading').hide();
            $detaildialog.dialog('open');
        });

   // Then, when delete action is called, open the second dialog
   fnOnDeleting: function (tr, id, fnDeleteRow) {
            var $dialog = $('#checkdeletedialog').dialog({
                autoOpen: false,
                modal: true,
                title: 'Delete Confirmation',
                zIndex: 90000
            });
            $dialog.dialog('open');
        }

Что-то я не так делаю здесь?

Ценю любую помощь .. спасибо:)

1 Ответ

6 голосов
/ 02 декабря 2011

Установите для свойства "stack" второго диалога значение true.

function (tr, id, fnDeleteRow) {
        var $dialog = $('#checkdeletedialog').dialog({
            autoOpen: false,
            modal: true,
            stack: true,
            title: 'Delete Confirmation'
        });
        $dialog.dialog('open');
    }

Дополнительная информация здесь .

РЕДАКТИРОВАТЬ : МыУ меня также были проблемы с модальными диалоговыми окнами, которые странно вели себя после однократного открытия.Мы обнаружили, что «уничтожение» диалога при его закрытии устраняет проблему, например

var $dialog = $('#checkdeletedialog').dialog({
        autoOpen: false,
        modal: true,
        stack: true,
        title: 'Delete Confirmation',
        close: function() {
            $(this).dialog('destroy');
        }
    });
...