为什么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”参数中的选择器。
你有没有尝试过?
$( ".selector" ).dialog( "moveToTop" );
参考: http : //api.jqueryui.com/dialog/#method-moveToTop
$('#element').dialog({ modal: true, stack: false, zIndex: 9999, ...
为我工作