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

问题描述

当点击图像时，我必须进行对话。问题是，我有一些真正的大Z指数（例如500），UI对话框是在这些元素的背面。

这里是页面，您需要登录，用户：raducup并且传递：1。另一个问题是，当我点击关闭对话框时，对象就会消失。

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

 函数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 （关闭）; 
} 
} 
] 
}）; 
 reparaZindex（）; 
} 
  

解决方案

，但您使用的是jQuery UI 1.10。

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

删除zIndex选项

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

您必须使用纯CSS来设置对话框顶部：

  .ui-dialog {z-index：1000！important;} 
  

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

如果您需要模态对话框设置 modal：true 选项，请参阅上的其他项目将被禁用，即不能与之交互。 Modal
对话框在对话框下面创建一个叠加层，但在其他页面
元素之上。

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

  .ui-front {z-index：1000！important; } 
  

也适用于此元素。

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.

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();
}

解决方案

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

In jQuery UI 1.10 the zIndex option is removed:

Removed zIndex option

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.

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

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

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.

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

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.

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屋！