jQuery UI 1.10:对话框和 zIndex 选项 [英] jQuery UI 1.10: dialog and zIndex option

问题描述

当单击图像时，我必须创建一个对话框才能出现.问题是我在那里有一些非常大的 z-index(例如 500)，并且 ui 对话框位于该元素的背面.

I have to make an dialog to apear when an image onclick. The problem is that I have some realy big z-index there (500 for example) and the ui dialog is on the back of that elements.

这里是页面，需要登录，用户:raducup"，密码:1".另一个问题是，当我在对话框上单击关闭时，对象消失了.

Here is the page, you need to log in, user: "raducup" and pass:"1". Another problem is that when I click close ont the dialog, the object desapears.

这是我点击图片时调用的函数:

This is the function I call when a image is click:

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.

You don't tell it, but you are using jQuery UI 1.10.

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

In jQuery UI 1.10 the zIndex option is removed:

删除了 zIndex 选项

Removed zIndex option

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

Similar to the stack option, the zIndex option is unnecessary with a proper stacking implementation. The z-index is defined in CSS and stacking is now controlled by ensuring the focused dialog is the last "stacking" element in its parent.

你必须使用纯 css 来设置对话框在顶部":

you have to use pure css to set the dialog "on the top":

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

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

you need the key !important to override the default styling of the element; this affects all your dialogs if you need to set it only for a dialog use the dialogClass option and style it.

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

If you need a modal dialog set the modal: true option see the docs:

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

If set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements.

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

You need to set the modal overlay with an higher z-index to do so use:

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

对于这个元素也是如此.

for this element too.

这篇关于jQuery UI 1.10:对话框和 zIndex 选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！