Question

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

Answer 1

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

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

删除了zIndex选项

与堆栈选项类似，a的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; }

也是这个元素。

Answer 2

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

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

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

Answer 3

添加CSS：

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

Answer 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/

Answer 5

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

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

并删除

 zIndex: 700,

来自对话框

Answer 6

moveToTop是正确的方式。

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

Answer 7

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

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

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

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

const adjustment = "+=99";

然而，jQuery只是不断增加模态屏幕上的zIndex值，所以通过第二个对话框，三明治不再有效。我放弃了ui对话框“模态”，使其成为“假”，并创建了我自己的模态。它完全模仿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;
}

Answer 8

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

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

jQuery UI 1.10：dialog和zIndex选项

8 个答案: