jQuery对话框和日期选择器插件出现问题

我有一个对话框，对话框上有一个日期选择器字段

当我打开对话框并单击datepicker字段时，datepicker面板将显示在对话框后面

我尝试了更多属性：zindex、stack、bgiframe，但没有成功

有人能帮我吗

---

Tks.

旧答案

z-index

（注意连字符！）是重要的属性。确保将其设置为大于对话，并确保将其设置为正确的元素。我们是这样做的：

#ui-datepicker-div 
{
 z-index: 1000; /* must be > than popup editor (950) */
}

API变更-2010年4月17日

在日期选择器的CSS文件中，找到

.ui datepicker

项并对其进行更改：

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; }

---

使用z-index:9999！重要的在Firefox 3.5.9（Kubuntu）中工作。

该对话框在iframe中呈现，并在所有其他内容（包括下拉列表）之上呈现。同时，datepicker以普通HTML呈现并绝对定位

---

听起来datepicker是相对于父页面而不是iframe呈现的。您是否尝试过将日历作为标准的、非绝对定位的博客放置在对话框中？或者可以使用下拉菜单。

从UI版本1.7.2开始，UI日期选择器div不再是有效的css元素。“ui datepicker”似乎是最外层的包装器，就我所知，将z-index设置为99999对我来说是正确的

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003; /* must be > than popup editor (1002) */
    }
</style>

.ui日期选择器
{
z索引：1003；/*必须大于弹出编辑器（1002）*/
}

在页面顶部设置此选项。它可以很好地工作：

<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>

.ui日期选择器{z-index:10100；}

我打电话让它工作了

$("#ui-datepicker-div").css("z-index", "1003" );

对于jquery-ui-1.8

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003 !important; /* must be > than popup editor (1002) */
    }
</style>

.ui日期选择器
{
z-index:1003！重要；/*必须大于弹出编辑器（1002）*/
}

---

因为datepicker有一个将z-index设置为1的element.style，所以需要使用重要的参数

在“input”文本元素处放置以下样式：“position:relative；z-index:100000；”

datepicker div从输入中获取z索引，但这仅在位置是相对的情况下有效

---

使用这种方式，您不必从jQuery UI修改任何javascript。

解决方案到jQuery datepicker 1.8.3版本，要更改z索引值，通过css进行更改并非不可能

这个很好用：

jQuery('.ui-datepicker-trigger').click(function() {
        setTimeout(function() {
            jQuery('#ui-datepicker-div').css('z-index', 999);
        }, 500)
    });

这对我很有用：

.ui-datepicker {
        z-index: 9999 !important;
    }

我感到震惊的是：

a） 这里没有人提到设置datepicker z-Index的编程解决方案 b） jQuery DatePicker在将z索引绑定到元素时没有传递z索引的选项

我使用js方法来计算最高索引。我们默认只检查div，因为这些元素很可能获得z索引值，并且比解析页面上的每个元素都要快，这是可以理解的

/* 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索引。感谢Ronye Vernaes（在本页的回答中）指出datepicker（）将拾取目标元素的z索引（如果它有一个并且设置为position:relative:

$(this.target).datepicker();
var zindex = e.getHighestZIndex();
zindex++;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);

target是我们在datepicker字段中创建的输入元素。 在绑定时，我们获得页面上最高的z索引，并将元素的z索引提高一个。 单击datepicker图标时，它将从输入元素中拾取z索引，因为正如Ronye Vernaes所提到的，样式位置为：relative

在这个解决方案中，我们不会试图猜测最高的z索引值是什么。我们真的明白了

datepicker现在将弹出z索引设置为比其关联字段多一个，以使其位于该字段前面，即使该字段本身在弹出对话框中也是如此。默认情况下，z索引为0，因此datepicker以1结尾。是否存在这样一种情况，即它没有正确显示日期选择器

以获得100的z指数。您需要输入

z-index:99

和JQueryUI将更新日期选择器为

z-index:100

或

和css

.high-z-index{z-index:99；}

您还可以指定要继承的z索引，该索引应该从对话框继承，并使jQueryUI正确检测z索引

---

或

和css

.inherit-z-index{z-index:inherit；}

取决于他使用的对话框（问题并没有说）。我们使用的那个并没有使用iframe，但我相信还有其他人可以使用。我使用的对话框是jQuery库1.3.2版的jQuery UI插件。是的，我假设jQuery UI使用iframe，我更改了dialog的zIndex属性等于1，并使用您所包含的代码。这个帖子解决了我的问题。谢谢。只是为了更新这个答案，它现在需要是z-index:1002。JQuery对话框使用内联样式：

style=“overflow:hidden；display:block；position:绝对；z-index:1001；轮廓颜色：-moz使用文本颜色；轮廓样式：无；轮廓宽度：0px；高度：自动；宽度：350px；顶部：309.5px；左侧：413.5px；”

再过几分钟探索之后，jQuery对话框似乎每次都会增加其z索引。我不确定这是否是一个bug，但将

#ui datepicker div

z-index设置为9999可以修复它。添加

位置总是好的，
相对
通常会完成我尝试的另一种方法不起作用。Jonatan的解决方案非常简单，非常完美！这是我在找到这个CSS解决方案之前正在编写的代码。$（'ui datepicker div'）.CSS（“z-index”，“1000”）；这个重要标志对于覆盖内联样式是必要的，我真的认为这是最好的方法，因为它提供了动态设置zIndex的可能性。请参阅本页上我的另一个完整答案。