52

当点击图像时，我必须制作一个对话框。问题是我在那里有一些非常大的 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();
}
4

9 回答 9

117

您没有告诉它，但您使用的是 jQuery UI 1.10。

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

删除了 zIndex 选项

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

您必须使用纯 css 将对话框设置为“在顶部”：

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

您需要 key!important来覆盖元素的默认样式；如果您只需要为对话框设置它，这会影响您的所有对话框，请使用该dialogClass选项并为其设置样式。

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

如果设置为 true，则对话框将具有模态行为；页面上的其他项目将被禁用，即无法交互。模态对话框在对话框下方但在其他页面元素上方创建覆盖。

您需要使用更高的 z-index 设置模态叠加层才能使用：

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

对于这个元素也是如此。

于 2013-06-04T12:50:10.910 回答
9

您可能想尝试 jQuery 对话框方法：

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

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

于 2014-05-31T02:51:59.933 回答
8

添加你的CSS：

 .ui-dialog { z-index: 1000 !important ;}
于 2013-06-04T12:12:25.703 回答
4

这里有多个建议，但据我所知，jQuery UI 家伙目前已经破坏了对话控制。

我这样说是因为我在我的页面上包含了一个对话，它的半透明和模态消隐 div 位于其他一些元素的后面。这不可能！

最后，基于其他一些帖子，我开发了这个全局解决方案，作为对话小部件的扩展。它对我有用，但我不确定如果我从对话中打开对话会做什么。

基本上，它会查找页面上其他所有内容的 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 ://stackoverflow.com/a/20942857

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

于 2015-05-29T13:58:43.410 回答
0

在调用对话框之前添加它

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

并删除

 zIndex: 700,

从对话

于 2013-06-04T12:14:36.967 回答
0

moveToTop是正确的方法。

z 索引不正确。它最初可以工作，但多个对话框将继续浮动在您使用 z-index 更改的对话框下方。不好。

于 2014-08-15T05:39:22.427 回答
0

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

在 element 上创建对话框后，我通过执行以下操作取得了一点成功$dlg。

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

由于每个对话框都有不同的开始z-index（它们逐渐变大），我制作adjustment了一个带有 boost 值的字符串，如下所示：

const adjustment = "+=99";

然而，jQuery 只是不断增加zIndex模态屏幕上的值，所以到第二个对话框时，三明治就不再起作用了。我放弃了 ui-dialog “modal”，将其设为“false”，并创建了自己的 modal。它完全模仿了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;
}
于 2018-03-18T04:20:43.990 回答
0

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

于 2021-11-30T04:23:26.103 回答
-1

向对话框对象添加zIndex属性：

$(elm).dialog(
 zIndex: 10000
);
于 2015-07-07T23:40:46.053 回答