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

【问题标题】：Why jQuery UI 1.10 remove jquery dialog zIndex option?为什么 jQuery UI 1.10 删除 jquery 对话框 zIndex 选项？
【发布时间】：2013-02-03 22:25:38
【问题描述】：

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

【问题讨论】：

标签： jquery dialog z-index

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

为我工作

【讨论】：

如果它对您有用，那么您使用的 jQuery UI 版本低于 1.10。
是的，zIndex 在 1.10 版中已弃用

【解决方案3】：

你试过了吗？

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我想我理解你的问题。 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. */
}

【讨论】：

谢谢，我想这会解决它。但我希望 jquery 对话框不要删除 zIndex 选项。
jQuery UI 是开源的，因此您可以影响其中的内容和现在的内容。如果你有正当理由，他们可能会听你的。你可以在这里开始：contribute.jquery.org/open-source
对我不起作用。但这确实... .ui-dialog { z-index:999 !important; }
有关新堆叠范例的详细说明，请参阅此页面：api.jqueryui.com/theming/stacking-elements

【解决方案6】：

只需阅读来自jQuery UI 1.10 的更改日志（连同已提交的the bug）：

移除 zIndex 选项

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

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

【讨论】：

但是使用选项zIndex是控制z-order的一种非常简单的方法，我不认为这是一种“黑客方式”。如何堆叠元素属性？当有很多对象时，焦点对话框并不总是其父级中的最后一个堆叠元素。
MarcoK，你的意思是 jquery UI 1.10 会让焦点对话框自动堆叠在顶部吗？我发现不是。或者我需要做什么才能使其堆叠到顶部？
有没有人有一个使用没有 zIndex 的绝对定位元素的“正确堆叠实现”的例子？
jQueryUI 希望您在 ui-front css 类上设置 z-index。这里有更多信息。 api.jqueryui.com/theming/stacking-elements