jQuery Dialog 和 Datepicker 插件的问题

Trouble with jQuery Dialog and Datepicker plugins

提问by Renato Bezerra

I have a dialog, and I have a datepicker field on the dialog.

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

When I open the dialog and click in the datepicker field, the datepicker panel show behind dialog.

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

I try more properties: zindex, stack, bgiframe, but not success.

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

Someone can help me?

有人可以帮助我吗？

Tks.

Tks。

回答by Craig Stuntz

Old Answer

旧答案

z-index(note the hyphen!) is the property that matters. Make sure you set it greater than the dialogue, and make sure you set it on the correct element. Here's how we do it:

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

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

API Change - April 17, 2010

API 变更 - 2010 年 4 月 17 日

In the CSS file for the date picker, find the .ui-datepickeritem and change it:

在日期选择器的 CSS 文件中，找到该.ui-datepicker项目并进行更改：

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

Using z-index: 9999 !important;worked in Firefox 3.5.9 (Kubuntu).

使用z-index: 9999 !important; 在 Firefox 3.5.9 (Kubuntu) 中工作。

回答by Jonatan Littke

for jquery-ui-1.8

对于 jquery-ui-1.8

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

The important is needed since the datepicker has an element.style which sets z-index to 1.

重要的是需要的，因为日期选择器有一个 element.style 将 z-index 设置为 1。

回答by Harmeet Singh

This worked for me:

这对我有用：

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

回答by Ronye Vernaes

Put the following style at the 'input' text element: "position: relative; z-index: 100000;".

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

The datepicker div takes the z-index from the input, but this works only if the position is relative.

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

Using this way you don't have to modify any javascript from jQuery UI.

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

回答by Ronye Vernaes

As of UI version 1.7.2 ui-datepicker-div is no longer a valid css element. "ui-datepicker" seems to be the outmost wrapper and setting the z-index to 99999 is working correctly for me as far as I know

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

回答by yasirmturk

for jquery-ui-1.7.2

对于 jquery-ui-1.7.2

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

回答by Revathi

Set this in your top of your page. It will work fine:

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

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

回答by Indra

I got it working by calling

我通过打电话让它工作

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

回答by Zac Imboden

I'm shocked that:

我感到震惊的是：

a) no one here has mentioned a programmatic solution to setting the datepicker z-Index b) there is no option for the jQuery DatePicker to pass a z-Index when binding it to an element.

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

I am using a js method to calculate the highest index. We default to checking only divs, because these are the likely elements to get a z-index value and is understandably quicker than parsing every element on the page.

我正在使用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;
}

Because we have to use javascript to bind the datepicker to an element, i.e. $('#some_element').datepicker(), at that time we set the target element's style so that datepicker will pick up the z-index from it. Thanks to Ronye Vernaes (in his answer on this page) for pointing out that datepicker() will pick up the target element's z-Index if it has one and is set to position: relative:

因为我们必须使用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 is the input element we are making into a datepicker field. At binding time, we get the highest z-index on the page and make the element's z-index one higher. When datepicker icon is clicked, it will pick up that z-index from the input element, because, as Ronye Vernaes mentioned, of the style position: relative.

this.target 是我们在 datepicker 字段中制作的输入元素。在绑定时，我们获得页面上最高的 z-index 并将元素的 z-index 提高一。当日期选择器图标被点击时，它会从输入元素中选择那个 z-index，因为，正如 Ronye Vernaes 提到的，样式位置：相对。

In this solution, we don't try and guess what the highest z-Index value is going to be. We actually GET IT.

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

回答by Loren

The datepicker now sets the popup z-index to one more than its associated field, to keep it in front of that field, even if that field is itself in a popup dialog. By default the z-index is 0, so datepicker ends up with 1. Is there a case where this is not showing the datepicker properly? JQuery Forum Post

日期选择器现在将弹出的 z-index 设置为比其关联字段大 1 的值，以将其保持在该字段的前面，即使该字段本身在弹出对话框中也是如此。默认情况下，z-index 为 0，所以 datepicker 以 1 结束。是否存在不能正确显示 datepicker 的情况？JQuery 论坛帖子

To get a z-index of 100. You need an input with z-index:99;and JQueryUI will update the datepicker to be z-index:100

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

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

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

You can also specify the z-index to inherit which should inherit from your dialog box and cause jQueryUI to properly detect the z-index.

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

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

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