jQuery Dialog 和 Datepicker 插件的问题答案

【问题标题】：Trouble with jQuery Dialog and Datepicker pluginsjQuery Dialog 和 Datepicker 插件的问题
【发布时间】：2010-10-17 11:19:21
【问题描述】：

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

当我打开对话框并单击日期选择器字段时，日期选择器面板显示在对话框后面。

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

有人可以帮助我吗？

Tks.

【问题讨论】：

标签： jquery jquery-ui-dialog

【解决方案1】：

旧答案

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 !important; 在 Firefox 3.5.9 (Kubuntu) 中工作。

【讨论】：

我将对话框的 zIndex 属性更改为 1，并使用您包含的此代码。这篇文章解决了我的问题。谢谢。
只是为了更新这个答案，它现在需要是 z-index:1002。 JQuery 对话框使用内联样式：style="overflow: hidden; display: block; position: absolute; z-index: 1001; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px; height: auto; width: 350px; top: 309.5px; left: 413.5px;"
经过几分钟的探索，jQuery Dialog 似乎每次都在增加它的 z-index。我不确定这是否是一个错误，但将#ui-datepicker-div z-index 设置为 9999 可以修复它。
添加position 总是好的，relative 通常会完成这项工作

【解决方案2】：

对于 jquery-ui-1.8

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

重要的是因为 datepicker 有一个 element.style 将 z-index 设置为 1。

【讨论】：

我尝试了另一种不起作用的方法。 Jonatan 的解决方案非常简单，非常完美！这是我在找到这个 CSS 解决方案之前正在处理的代码。
$('#ui-datepicker-div').css("z-index","1000");

【解决方案3】：

这对我有用：

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

【讨论】：

【解决方案4】：

在“输入”文本元素中添加以下样式：“位置：相对；z-index：100000；”。

datepicker div 从输入中获取 z-index，但这仅适用于相对位置。

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

【讨论】：

我真的认为这是最好的方法，因为它开辟了动态设置 zIndex 的可能性。在此页面上查看我的其他完整答案。

【解决方案5】：

从 UI 版本 1.7.2 开始，ui-datepicker-div 不再是有效的 css 元素。 “ui-datepicker”似乎是最外面的包装器，据我所知，将 z-index 设置为 99999 对我来说工作正常

【讨论】：

【解决方案6】：

对于 jquery-ui-1.7.2

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

【讨论】：

【解决方案7】：

将此设置在页面顶部。它会正常工作：

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

【讨论】：

!importance 标志是覆盖内联样式所必需的

【解决方案8】：

我通过调用得到它的工作

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

【讨论】：

【解决方案9】：

我很震惊：

a) 这里没有人提到设置日期选择器 z-Index 的编程解决方案 b) jQuery DatePicker 在将其绑定到元素时无法传递 z-Index。

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

/* 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 是我们在 datepicker 字段中输入的元素。在绑定时，我们获取页面上最高的 z-index 并使元素的 z-index 高一级。单击日期选择器图标时，它将从输入元素中拾取该 z-index，因为正如 Ronye Vernaes 所提到的，样式位置：相对。

在此解决方案中，我们不会尝试猜测最高 z-Index 值将是多少。我们实际上得到了它。

【讨论】：

【解决方案10】：

对话框在 iframe 中呈现，并呈现在其他所有内容（包括下拉菜单）之上。同时，日期选择器以普通 HTML 呈现并绝对定位。

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

【讨论】：

取决于他使用的是哪个对话框（问题没有说）。我们使用的不使用 iframe，但我相信还有其他的。
我使用的对话框是jQuery UI 1.3.2版本的jQuery库插件。
是的，我假设是 jQuery UI，它确实使用了 iframe

【解决方案11】：

jquery datepicker 1.8.3版本的解决方法，改变z-index值，通过css改变也不是不可能。

这个很好用：

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

【讨论】：

【解决方案12】：

日期选择器现在将弹出窗口 z-index 设置为比其关联字段多一，以将其保持在该字段的前面，即使该字段本身在弹出对话框中也是如此。默认情况下，z-index 为 0，因此 datepicker 以 1 结束。是否存在无法正确显示 datepicker 的情况？ JQuery Forum Post

要获得 100 的 z-index。您需要输入 z-index:99;，JQueryUI 会将日期选择器更新为 z-index:100

<input style="z-index:99;"> 或 <input class="high-z-index"> 和 css .high-z-index { z-index: 99; }

您还可以指定要继承的 z-index，哪个应该从您的对话框继承，并让 jQueryUI 正确检测 z-index。

<input style="z-index:inherit;"> 或 <input class="inhert-z-index"> 和 css .inherit-z-index { z-index: inherit; }

【讨论】：