jQuery UI 1.10：对话框和zIndex选项

Question

我需要在图像被点击时弹出对话框。问题是，我有一些非常大的 z-index（例如 500），而 UI 对话框在这些元素的背面。

这里是页面链接，您需要登录，用户名为“raducup”，密码为“1”。另一个问题是，当我单击对话框上的关闭按钮时，对象消失了。

这是我调用的函数：

function openItem(obiect){
    $( obiect ).css('zIndex',9999);
    $( obiect ).dialog({
        dialogClass: "no-close",
        modal: true,
        draggable: true,
        overlay: "background-color: red; opacity: 0.5",
        buttons: [
            {
                text: "OK",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
    reparaZindex();
}

- raducup

---

只需在表单中添加 z-index:9999。这对我起作用了。 - Harsha Venkataramu

你可以在对话框定义中设置zIndex:'1000'选项，然后移除$(obiect).css('zIndex',9999)吗？ - Irvin Dominin

不起作用，这是我做的第一件事... - raducup

Answer 1

你没有明说，但你正在使用 jQuery UI 1.10。

在 jQuery UI 1.10 中，`zIndex`选项已被移除：

“移除 zIndex 选项

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

你必须使用纯CSS将对话框置于顶层：

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

要覆盖元素的默认样式，需要使用关键字!important; 如果只需要为对话框设置它，请使用dialogClass选项并进行样式设置。

如果您需要模态对话框，请设置modal: true选项，参见文档：

  

如果设置为true，则对话框将具有模态行为；页面上的其他内容都将被禁用，即无法与之交互。模态对话框在对话框下方创建一个遮罩层，但在其他页面元素之上。

要设置模态遮罩层的更高z-index，请使用以下代码：

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

对于这个元素也是如此。

- Irvin Dominin

---

+1 - 我也被 jQuery UI 1.10 中 z-index 的更改所困扰 - Alnitak

从技术上讲，zIndex选项并非已弃用，而是被彻底删除。请参见http://bugs.jqueryui.com/ticket/8729。 - Matthew Clark

对于模态对话框，我发现顺序很重要。将.ui-front放在.ui-dialog上方。如果不这样做，对话框将使用.ui-front z-index，并最终出现在遮罩层后面。 - Ben Gripka

.ui-dialog 应该改为 .ui-front + 1，否则对我不起作用。因此，.ui-front { z-index: 1000 !important; } .ui-dialog { z-index: 1001 !important; }。 - Hirnhamster

在jQuery UI v1.9.2中，与其设置.ui-front的z-index，你需要设置.ui-widget-overlay的z-index。此外，正如@Hirnhamster所提到的那样，遮罩层的z-index需要比小部件小，否则遮罩层将会覆盖实际的对话框。 - Doctor Blue

Answer 2

你可以尝试使用jQuery对话框方法：

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

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

- Alain Gauthier

---

对我有用的唯一建议！谢谢！ - Dan Rayson

这个！它正是我需要的来管理多个堆叠对话框。我的对话框中有点击处理程序相互链接。这使得“回忆”现有对话框并将其移动到前面而无需混乱地操作z-index变得简单。完美！ - Todd Hammer

似乎无法与Leaflet地图同时使用，对话框仍会在地图后面打开。 - MikeT

Answer 3

在你的CSS中添加：

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

- Rajiv007

---

你确定吗...我检查了页面，它对我有效。如果没有解决你的问题，很抱歉。也许你可以添加!important。 - Rajiv007

现在它可以使用 !important，但仍然可以选择一些元素（我需要一个模态 UI）。 - raducup

你的内容正在使用 z-index:501...所以你必须使用更大的值。 - Rajiv007

你可能需要增加 z 值，一些第三方工具有巨大的 z 索引来强制它们置于其他控件之上。 - MikeT

Answer 4

这里有多个建议，但据我所见，jQuery UI 的开发人员目前已经破坏了对话框控件。

我这么说是因为我在页面上包含了一个对话框，它半透明，模态遮罩层在其他元素的后面。这一点肯定不对！

最终，基于其他帖子的一些建议，我开发了一个全局解决方案，作为对话框小部件的扩展。它对我有效，但我不确定如果我从一个对话框中打开另一个对话框会发生什么情况。

基本上，它查找页面上其他所有内容的zIndex，并将 .ui-widget-overlay 移动到更高一级，然后将对话框本身移动到更高一级。

$.widget("ui.dialog", $.ui.dialog,
{
    open: function ()
    {
        var $dialog = $(this.element[0]);

        var maxZ = 0;
        $('*').each(function ()
        {
            var thisZ = $(this).css('zIndex');
            thisZ = (thisZ === 'auto' ? (Number(maxZ) + 1) : thisZ);
            if (thisZ > maxZ) maxZ = thisZ;
        });

        $(".ui-widget-overlay").css("zIndex", (maxZ + 1));
        $dialog.parent().css("zIndex", (maxZ + 2));

        return this._super();
    }
});

感谢以下来源提供了如何做到这一点的信息： https://dev59.com/DGTWa4cB1Zd3GeqPFKHL#20942857 http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

- Morvael

Answer 5

在调用对话框之前添加此内容。

$( obiect ).css('zIndex',9999);

并删除

 zIndex: 700,

来自对话框

- Rohan Kumar

---

好的，谢谢。现在如何使对象在我点击关闭后不消失（该元素是一张图片）？ - raducup

代码没起作用，我更新了代码但还是不行，检查一下代码。 - raducup

Answer 6

moveToTop 是正确的方法。

z-Index 不正确。它在最初是有效的，但多个对话框将继续浮动在您使用 z-index 更改的对话框下面。不好。

- Carlos Saenz

Answer 7

$(".ui-dialog").css("zIndex", 10000);

的意思是设置类名为“ui-dialog”的元素的CSS属性“zIndex”为10000。

- user10649559

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 8

为了将我的元素夹在模态屏幕和对话框之间，我需要将我的元素提升到模态屏幕之上，然后再将对话框提升到我的元素之上。

在创建元素$dlg后，我尝试了以下方法，取得了一些小成功。

$dlg.closest('.ui-dialog').css('zIndex',adjustment);

由于每个对话框都有不同的起始 z-index（它们递增变大），我会创建一个名为adjustment的字符串，其中包含一个增量值，例如：

const adjustment = "+=99";

然而，jQuery 仅在模态屏幕上增加了 zIndex 值，所以到第二个对话框时，“三明治”不再起作用。 我放弃了 ui-dialog "modal"，将其设为 "false"，然后创建了自己的模态。 它完全模仿了 jQueryUI。 这就是它：

CoverAll = {};
CoverAll.modalDiv = null;

CoverAll.modalCloak = function(zIndex) {
  var div = CoverAll.modalDiv;
  if(!CoverAll.modalDiv) {
    div = CoverAll.modalDiv = document.createElement('div');
    div.style.background = '#aaaaaa';
    div.style.opacity    = '0.3';
    div.style.position   = 'fixed';
    div.style.top        = '0';
    div.style.left       = '0';
    div.style.width      = '100%';
    div.style.height     = '100%';
  }
  if(!div.parentElement) {
    document.body.appendChild(div);
  }
  if(zIndex == null)
    zIndex = 100;
  div.style.zIndex  = zIndex;
  return div;
}

CoverAll.modalUncloak = function() {
  var div = CoverAll.modalDiv;
  if(div && div.parentElement) {
    document.body.removeChild(div);
  }
  return div;
}

- IAM_AL_X

Answer 9

在对话框对象中添加 zIndex 属性：

$(elm).dialog(
 zIndex: 10000
);

- TechieBrij