18

我发现最新版本的 jQuery UI(1.10) 删除了该zIndex选项。并且在 jQuery 网站上得到了证实。

真的让我很震惊。请考虑一下：

当我们有一个jqgrid，用editrow()oraddrow()打开一个编辑对话框来编辑一些东西，里面有很多字段，其中一些有自定义事件，比如，当你点击它时，它会显示另一个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有多个对话框时如何控制顺序？

4

6 回答 6

26

我想我理解你的问题。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. */
}
于 2013-03-13T15:32:06.687 回答
6

只需阅读jQuery UI 1.10中的更改日志（连同已提交的错误）：

删除了 zIndex 选项

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

换句话说：您应该对元素进行属性堆叠，而不是使用 zIndex 选项“破解”您的堆叠方式。

于 2013-02-19T09:36:18.380 回答
2

如果您想在实例化对话框后立即使用 jQuery 应用 zIndex，您可以执行以下操作：

$('#element').dialog({ your options... }).parent('.ui-dialog').css('zIndex',9999);
于 2014-09-19T01:27:52.823 回答
0

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

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

于 2013-03-25T15:50:49.373 回答
0

你有没有尝试过？

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

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

于 2014-05-30T17:03:47.120 回答
-2 
 $('#element').dialog({     modal: true,
                            stack: false,
                            zIndex: 9999,
...

为我工作

于 2014-07-17T09:35:51.103 回答