Question

我发现最新版本的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订单？

Answer 1

我想我理解你的问题。 jQuery UI对话框的CSS z-index不够高，无法始终显示在您的内容之上。这是一个快速修复：

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

Answer 2

只需阅读jQuery UI 1.10的更改日志（以及已提交的the bug）：

删除了zIndex选项

与堆栈选项类似，使用正确的堆叠实现不需要zIndex选项。该   z-index在CSS中定义，现在通过确保来控制堆叠   焦点对话框是其父级中的最后一个“堆叠”元素。

换句话说：你应该使用zIndex选项将属性堆叠元素而不是“黑客”堆叠方式。

Answer 3

如果要在实例化对话框时使用jQuery应用zIndex，则可以执行以下操作：

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

Answer 4

您是否尝试过使用“appendTo”选项？只需动态添加一个包含z-index的包装器，然后使用该元素的id作为“appendTo”参数中的选择器。

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

Answer 5

你试过吗？

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

参考：http://api.jqueryui.com/dialog/#method-moveToTop

Answer 6

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

为我工作

为什么jQuery UI 1.10删除了jquery对话框zIndex选项？

6 个答案: