Почему 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);
Вы пытались использовать опцию "appendTo"? Просто динамически добавьте оболочку с z-индексом того, что вам нужно, а затем используйте идентификатор этого элемента в качестве селектора в аргументе "appendTo".
$('#element').dialog({ modal: true,
stack: false,
zIndex: 9999,
...
работал на меня