jQuery UI 1.10：对话框和 zIndex 选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16917430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI 1.10: dialog and zIndex option
提问by raducup
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.
当单击图像时，我必须制作一个对话框才能出现。问题是我在那里有一些非常大的 z-index（例如 500），并且 ui 对话框位于该元素的背面。
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.
这是页面，您需要登录，用户：“raducup”并传递：“1”。另一个问题是，当我在对话框上单击关闭时，对象消失了。
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();
}
回答by Irvin Dominin
You don't tell it, but you are using jQuery UI 1.10.
你没有告诉它，但你使用的是 jQuery UI 1.10。
In jQuery UI 1.10 the zIndexoption is removed:
在 jQuery UI 1.10zIndex中删除了该选项：
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.
删除了 zIndex 选项
与堆栈选项类似，zIndex 选项对于正确的堆栈实现是不必要的。z-index 在 CSS 中定义，现在通过确保聚焦对话框是其父级中的最后一个“堆叠”元素来控制堆叠。
you have to use pure css to set the dialog "on the top":
你必须使用纯 css 来设置对话框“在顶部”：
.ui-dialog { z-index: 1000 !important ;}
you need the key !importantto override the default styling of the element; this affects all your dialogs if you need to set it only for a dialog use the dialogClassoption and style it.
您需要密钥!important来覆盖元素的默认样式；如果您只需要为对话框设置它，这会影响您的所有对话框，请使用该dialogClass选项并为其设置样式。
If you need a modal dialog set the modal: trueoption see the docs:
如果您需要一个模态对话框设置该modal: 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.
如果设置为 true，则对话框将具有模态行为；页面上的其他项目将被禁用，即无法与之交互。模态对话框在对话框下方但在其他页面元素上方创建叠加层。
You need to set the modal overlay with an higher z-index to do so use:
您需要使用更高的 z-index 设置模态叠加才能使用：
.ui-front { z-index: 1000 !important; }
for this element too.
对于这个元素也是如此。
回答by Alain Gauthier
You may want to try jQuery dialog method:
您可能想尝试 jQuery 对话框方法：
$( ".selector" ).dialog( "moveToTop" );
回答by Rajiv007
Add in your CSS:
在你的 CSS 中添加：
.ui-dialog { z-index: 1000 !important ;}
回答by Morvael
There are multiple suggestions here, but as far as I can see the jQuery UI guys have broken the dialogue control at present.
这里有多个建议，但据我所知，jQuery UI 家伙目前已经破坏了对话控制。
I say this because I include a dialogue on my page, and its semi transparent and the modal blanking div is behind some other elements. That can't be right!
我这样说是因为我在我的页面上包含了一个对话，它的半透明和模态消隐 div 位于其他一些元素之后。那不可能是对的！
In the end based on some other posts I developed this global solution, as an extension to the dialogue widget. It works for me but I'm not sure what it would do if I opened a dialogue from within a dialogue.
最后基于其他一些帖子，我开发了这个全局解决方案，作为对话小部件的扩展。它对我有用，但我不确定如果我从对话中打开对话会做什么。
Basically it looks for the zIndex of everything else on the page and moves the .ui-widget-overlay to be one higher, and the dialogue itself to be one higher than that.
基本上它会查找页面上所有其他内容的 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();
}
});
Thanks to the following, as this is where I got the info from of how to do this: https://stackoverflow.com/a/20942857
感谢以下内容，因为这是我从中获得如何执行此操作的信息的地方：https: //stackoverflow.com/a/20942857
http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
回答by IAM_AL_X
To sandwich an my element between the modal screen and a dialog, I need to lift my element above the modal-screen, and then lift the dialog above my element.
要将我的元素夹在模态屏幕和对话框之间，我需要将我的元素提升到模态屏幕上方，然后将对话框提升到我的元素上方。
I had a small success by doing the following after creating the dialog on element $dlg.
在 element 上创建对话框后，我通过执行以下操作取得了小小的成功$dlg。
$dlg.closest('.ui-dialog').css('zIndex',adjustment);
Since each dialog has a different starting z-index(they incrementally get larger) I make adjustmenta string with a boost value, like this:
由于每个对话框都有不同的开始z-index（它们逐渐变大），我创建adjustment了一个带有 boost 值的字符串，如下所示：
const adjustment = "+=99";
However, jQuery just keeps increasing the zIndexvalue on the modal screen, so by the second dialog, the sandwich no longer worked. I gave up on ui-dialog "modal", made it "false", and just created my own modal. It imitates jQueryUI exactly. Here it is:
然而，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;
}
回答by Rohan Kumar
Add this before calling dialog
在调用对话框之前添加这个
$( obiect ).css('zIndex',9999);
And remove
并删除
zIndex: 700,
from dialog
从对话框
回答by Carlos Saenz
moveToTopis the proper way.
moveToTop是正确的方法。
z-Index is not correct. It works initially, but multiple dialogs will continue to float underneath the one you altered with z-index. No good.
z-Index 不正确。它最初有效，但多个对话框将继续浮动在您使用 z-index 更改的对话框下方。不好。
回答by TechieBrij
Add zIndexproperty to dialog object:
将zIndex属性添加到对话框对象：
$(elm).dialog(
zIndex: 10000
);
