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

Я нашел последнюю версию пользовательского интерфейса jQuery (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 заказать, когда есть более одного диалога?

6 ответов

Решение

Я думаю, что понимаю вашу проблему. CSS z-index для диалогового окна jQuery UI недостаточно высок, чтобы всегда показываться над вашим контентом. Вот быстрое решение:

/* 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. */
}

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

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

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

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

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

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

Ты пытался?

$( ".selector" ).dialog( "moveToTop" );

ссылка: http://api.jqueryui.com/dialog/

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

http://api.jqueryui.com/dialog/

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

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

Другие вопросы по тегам