jQuery UI 1.10：对话框和 zIndex 选项

Posted 2023-02-22

【中文标题】jQuery UI 1.10：对话框和 zIndex 选项

【英文标题】：jQuery UI 1.10: dialog and zIndex option

【发布时间】：2013-05-30 19:48:21

【问题描述】：

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

【问题讨论】：

只需将z-index:9999 添加到表单中。它对我有用。

您能否将 zIndex:'1000' 选项设置为对话框定义并删除 $( obiect ).css('zIndex',9999); ?

不工作，这是我做的第一件事......

【参考方案1】：

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

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

移除 zIndex 选项

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

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

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

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

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

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

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

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

也适用于这个元素。

【讨论】：

我确实使用了模态：true，但是模态仅适用于 zindex 0 的元素，如果它具有 zindx 500，则模态选项不起作用

样式 .ui-front 也为 .ui-front z-index:1000 !important; 因为覆盖默认使用 z-index 100

+1 - 我也被 jQuery UI 1.10 中 z-index 的更改所吸引

对于模式对话框，我发现顺序很重要。将 .ui-front 放在 .ui-dialog 上方。如果您不这样做，则对话框使用 .ui-front z-index 并最终位于叠加层后面。

.ui-dialog 应该是.ui-front + 1，否则对我不起作用。所以.ui-front z-index: 1000 !important; .ui-dialog z-index: 1001 !important;

【参考方案2】：

你可能想试试jQuery对话框方法：

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

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

【讨论】：

唯一对我有用的建议！谢谢！11

这个！这正是我管理多个堆叠对话框所需要的。我的对话框中有单击处理程序，它们相互链接。这使得“召回”和现有对话框变得简单，并将其移动到前面，而无需使用 z-indexes。完美！

似乎不能与传单地图一起使用，对话框仍然在地图后面打开

【参考方案3】：

添加你的 CSS：

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

【讨论】：

您确定...我查看了该页面，它确实对我有用。抱歉，如果它没有解决您的问题。也许你可以添加 !important。

现在它可以与 !important 一起使用，但仍然可以选择一些元素（我需要一个模态 ui）

您的内容正在使用 z-index:501...所以您必须使用更多。

您可能需要增加 z 值，其他一些 3rd 方工具具有大量 z 索引以强制它们位于其他控件之上

【参考方案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://***.com/a/20942857

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

【参考方案5】：

在调用对话框之前添加这个

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

然后删除

 zIndex: 700,

来自对话框

【讨论】：

好的，谢谢，现在如何使对象在我单击关闭后不绝望（元素是图像）

不行，我更新了代码还是不行，检查代码。

【参考方案6】：

moveToTop 是正确的方式。

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

【参考方案7】：

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

在元素 $dlg 上创建对话框后，我通过执行以下操作取得了小小的成功。

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

由于每个对话框都有不同的起始 z-index（它们逐渐变大），我将 adjustment 设为一个带有提升值的字符串，如下所示：

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;

【参考方案8】：

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案9】：

将zIndex属性添加到对话框对象：

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