jQuery UI 1.10:对话框和zIndex选项

jQuery UI 1.10: dialog and zIndex option

本文关键字：zIndex 选项 对话框 UI jQuery      更新时间：2023-09-26

我必须使一个对话框出现时，图像点击。问题是我有一个很大的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();
}

你没有告诉它，但你正在使用jQuery UI 1.10。

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

删除zIndex选项

与stack选项类似，zIndex选项对于正确的堆叠实现。z-index在CSS和堆叠现在通过确保焦点对话框是最后一个来控制"stacking"元素。

你必须使用纯CSS设置对话框"on the top":

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

需要键!important来覆盖元素的默认样式;这将影响你所有的对话框，如果你需要设置它只为一个对话框使用dialogClass选项和样式。

如果你需要一个模态对话框设置modal: true选项，请参阅文档:

如果设置为true，对话框将具有模态行为;其他项目该页将被禁用，即不能与之交互。模态对话框创建一个覆盖在对话框下方，但在其他页面上方

元素。

你需要设置一个更高的z-index模态叠加，使用:

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

您可以尝试jQuery对话框方法:

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

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

添加你的CSS:

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

这里有很多建议，但据我所知，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/

在调用dialog前添加这个

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

和删除

 zIndex: 700,
从对话框

moveToTop是正确的方式。

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

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

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

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

由于每个对话框都有不同的开始z-index(它们逐渐变大)，我使adjustment成为一个具有boost值的字符串，如下所示:

const adjustment = "+=99";

然而，jQuery只是不断增加模式屏幕上的zIndex值，所以到第二个对话框，三明治不再工作。我放弃了ui对话框"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;
}

(".ui-dialog"美元。css("zIndex" 10000);

添加zIndex属性到对话框对象:

$(elm).dialog(
 zIndex: 10000
);
相关文章：