Почему jQuery UI 1.10 удаляет диалоговое окно jQuery zIndex?

Я обнаружил, что последняя версия jQuery UI (1.10) удаляет параметр zIndex. И это подтверждено на веб-сайте jQuery.

Это действительно потрясло меня. Пожалуйста, подумайте об этом:

Когда у нас есть jqgrid и используйте editrow() или addrow(), чтобы открыть диалоговое окно редактирования, чтобы что-то редактировать, и внутри есть много полей, некоторые из которых имеют самоопределяемое событие, например, когда вы нажимаете на него, он покажет другое диалоговое окно jQuery, чтобы отобразить некоторые элементы дерева для выбора.

В jQuery UI 1.9 (в комплекте) вы можете установить диалоговом окне jQuery zIndex больше, чем в диалоговом окне редактирования jqgrid (поддержка диалога диалога jqgrid для редактирования zIndex), поэтому диалог jQuery всегда включен и может быть замечен и используется.

В jQuery UI 1.10 вы не можете установить zIndex, поэтому диалог jQuery всегда находится за диалогом редактирования jqgrid.

Я думаю, что такая сцена очень распространена.

Почему jQuery UI 1.10 удаляет диалоговое окно jQuery zIndex? Как управлять порядком z-index при наличии более одного диалога?

Ответы

Ответ 1

Думаю, я понимаю вашу проблему. Z-индекс CSS для диалогового окна интерфейса jQuery недостаточно высок, чтобы всегда показывать выше вашего контента. Вот быстрое решение:

/* A class used by the jQuery UI CSS framework for their dialogs. */
.ui-front {
    z-index:1000000 !important; /* The default is 100. !important overrides the default. */
}

Ответ 2

Просто прочитайте журнал изменений из jQuery UI 1.10 (вместе с ошибка, которая была подана для него):

Удалена опция zIndex

Аналогично опции стека опция zIndex не нужна при правильной реализации стекирования. z-index определяется в CSS, и теперь стекирование контролируется путем обеспечения сфокусированное диалоговое окно является последним элементом "stacking" в его родительском объекте.

Другими словами: вы должны использовать свойство stack, вместо того, чтобы "взломать" ваш способ стекирования, используя опцию zIndex.

Ответ 3

Если вы хотите применить zIndex, используя jQuery, как только вы создадите диалоговое окно, вы можете сделать следующее:

$('#element').dialog({ your options... }).parent('.ui-dialog').css('zIndex',9999);

Ответ 4

Вы пытались использовать опцию "appendTo"? Просто динамически добавьте оболочку с z-индексом того, что вам нужно, а затем используйте идентификатор этого элемента в качестве селектора в аргументе "appendTo".

http://api.jqueryui.com/dialog/#option-appendTo

Ответ 6

 $('#element').dialog({     modal: true,
                            stack: false,
                            zIndex: 9999,
...

работал у меня