麻烦与jQuery对话框和Datepicker插件
我有一个对话框，并在对话框中有一个dateselect器字段。
当我打开对话框并点击dateselect器字段时，dateselect器面板显示在对话框后面。
我尝试更多的属性：zindex，堆栈，bgiframe，但不成功。
有人可以帮助我吗？
韩国社交协会。
老答案
z-index （注意连字符！）是重要的属性。 确保将其设置为大于对话框，并确保将其设置在正确的元素上。 以下是我们如何做到的：
#ui-datepicker-div { z-index: 1000; /* must be > than popup editor (950) */ }
API变更 – 2010年4月17日
在date选取器的CSS文件中，find.ui-datepicker项并更改它：
.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; }
使用z-index：9999！重要; 在Firefox 3.5.9（Kubuntu）工作。
为jquery-UI-1.8
<style type="text/css"> .ui-datepicker { z-index: 1003 !important; /* must be > than popup editor (1002) */ } </style>
由于datepicker有一个将z-index设置为1的element.style，因此需要重要。
这对我工作：
.ui-datepicker { z-index: 9999 !important; }
将下面的样式放在'input'文本元素中：“position：relative; z-index：100000;”。
datepicker div从input中获取z-index，但是这只在位置是相对的时才起作用。
使用这种方法，你不必修改任何从jQuery UI的JavaScript。
截至UI版本1.7.2 ui-datepicker-div不再是一个有效的CSS元素。 “ui-datepicker”似乎是最外面的包装，并设置Z指数为99999正在为我工作正确据我所知
为jquery-ui-1.7.2
<style type="text/css"> .ui-datepicker { z-index: 1003; /* must be > than popup editor (1002) */ } </style>
将其设置在页面的顶部。 它会正常工作：
<style type="text/css"> .ui-datepicker {z-index:10100;} </style>
我通过打电话来工作
$("#ui-datepicker-div").css("z-index", "1003" );
我感到震惊的是：
a）这里没有人提到了设置dateselect器z-Index的程序解决schemeb）jQuery DatePicker在绑定到元素时没有select传递z-Index。
我正在使用js方法来计算最高的索引。 我们默认只检查div，因为这些是获得z-index值的可能元素，并且比parsing页面上的每个元素更快。
/* Get the highest zindex for elements on the page */ function getHighestZIndex(element){ var index_highest = 0; var index_current; if(element == undefined){ element = 'div'; } $(element).each(function(){ index_current = parseInt($(this).css("z-index"), 10); if(index_current > index_highest) { index_highest = index_current; } }); return index_highest; }
因为我们必须使用javascript将datepicker绑定到一个元素，例如$（'＃some_element'）。datepicker（），那么我们设置目标元素的样式，以便datepicker从中选取z-index。 感谢Ronye Vernaes（在他的回答中）指出datepicker（）将会选取目标元素的z-Index，如果它有一个并且被设置为position：relative：
$(this.target).datepicker(); var zindex = e.getHighestZIndex(); zindex++; $(this.target).css('position','relative'); $(this.target).css('z-index',zindex);
this.target是我们正在做一个dateselect器字段的input元素。 在绑定的时候，我们得到页面上最高的z-索引，并使元素的z-索引更高一些。 当点击dateselect器图标时，它将从input元素中拾取该z-index，因为，正如Ronye Vernaes所提到的，样式位置：相对。
在这个解决scheme中，我们不会去猜测什么是最高的z-Index值。 我们实际上得到它。
该对话框在一个iframe中呈现，并在其他所有内容（包括下拉列表）上呈现。 与此同时，dateselect器以正常的HTML呈现，并且绝对定位。
这听起来像dateselect器是相对于父页面，而不是iframe绝对呈现。 你有没有试过把日历放在对话框中，只是一个标准的，非绝对定位的博客？ 或者你可以使用下拉菜单。
解决schemejquery datepicker 1.8.3版本，要改变z-index值，通过css改变是不可能的。
这个工作正常：
jQuery('.ui-datepicker-trigger').click(function() { setTimeout(function() { jQuery('#ui-datepicker-div').css('z-index', 999); }, 500) });
datepicker现在将popup的z-index设置为比其相关字段多一个，以便将其保留在该字段的前面，即使该字段本身位于popup对话框中。 默认情况下，z-index是0，所以datepicker以1结束。有没有这种情况下，不正确地显示datepicker？ JQuery论坛post
要得到一个100的z-index。你需要一个带有z-index:99;的inputz-index:99; 而JQueryUI会将dateselect器更新为z-index:100
<input style="z-index:99;"> or <input class="high-z-index"> and css .high-z-index { z-index: 99; } .high-z-index { z-index: 99; }
你也可以指定z-indexinheritance，它应该从你的对话框inheritance，并使jQueryUI正确地检测z-index。
<input style="z-index:inherit;"> or <input class="inhert-z-index"> and css .inherit-z-index { z-index: inherit; } .inherit-z-index { z-index: inherit; }
