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

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

这真让我震惊。 请想一想:

当我们有一个jqgrid,并使用editrow()addrow()来打开一个编辑对话框来编辑某些东西,里面有很多字段,其中一些有自定义的事件,比如,当你点击它时,它会显示另一个jQuery对话框,显示一些要选择的树视图项。

在jQuery UI 1.9(包含)下,您可以将jQuery对话框的zIndex选项设置为大于jqgrid编辑对话框(jqgrid编辑对话框支持set zIndex ),因此jQuery对话框始终可用,可以查看和使用。

在jQuery UI 1.10下,您无法设置zIndex ,因此jQuery对话框始终位于jqgrid编辑对话框的后面。

我觉得这样的场景非常普遍。

为什么jQuery UI 1.10删除jQuery对话框zIndex选项? 如果有多个对话框,如何控制z-index顺序?

我想我理解你的问题。 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 UI 1.10中读取更改日志(以及已为其提交的错误 ):

删除了zIndex选项

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

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

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

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

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

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

你有没有尝试过?

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

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

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

为我工作