在div上面放置jQuery对话框

Question

我是jQuery的新手，我在将jQuery框放在div上方时遇到了麻烦 我有一个带有按钮的div，点击按钮，JQuery对话框打开 问题是对话框出现在div后面，我想把它放在div上面。

我搜索了解决方案，发现指定zIndex可以解决问题。但 我使用的是jquery-ui-1.10.3.min.js，版本不支持zIndex。

请建议任何可能的解决方案。

$("#mydialog").dialog({
  resizable: false,
  modal: true,
  title: "title",
  buttons: {
    Ok: function() {
    $(this).dialog("close");
  }
}

Answer 1

因为jQuery UI对话框的CSS z-index不够高，无法始终显示在您的内容之上 您所要做的就是覆盖css中的类（ui-dialog）的z-index

.ui-dialog{z-index: 1000 !important;}

Answer 2

尝试使用firebug或开发人员工具获取相关元素的id或类，然后在css中设置它的z-index为更高

Answer 3

在jQuery UI 1.10中删除了zIndex选项：

  

删除了zIndex选项

     

与堆栈选项类似，a的zIndex选项是不必要的   适当的堆叠实施。 z-index在CSS和中定义   现在通过确保聚焦对话框是最后一个来控制堆叠   ＆＃34;层叠＆＃34;在其父母中的元素。

您必须使用css设置对话框＆＃34;在顶部＆＃34;，如下所示：

.ui-dialog { z-index: 1000 !important;}

您需要!important来覆盖元素的默认样式。

为z-index指定的值必须设置为高于div。

如果您只需要为使用dialogClass属性的对话框设置它，则会影响所有对话框。