54

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

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

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

有人可以帮助我吗？

谢了。

4

12 回答 12

80

旧答案

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) 中工作。

于 2009-04-03T20:57:08.290 回答
18

对于 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，因此需要很重要。

于 2010-04-13T15:11:33.557 回答
6

这对我有用：

.ui-datepicker {
        z-index: 9999 !important;
    }
于 2012-06-29T08:02:17.200 回答
2

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

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

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

于 2012-01-02T19:58:00.963 回答
1

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

于 2009-06-10T21:06:12.277 回答
1

对于 jquery-ui-1.7.2

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003; /* must be > than popup editor (1002) */
    }
</style>
于 2009-08-25T06:48:09.720 回答
1

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

<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>
于 2009-12-14T15:22:52.657 回答
1

我打电话给它工作

$("#ui-datepicker-div").css("z-index", "1003" );
于 2010-04-04T06:47:51.473 回答
1

我很震惊：

a) 这里没有人提到设置 datepicker 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 值将是多少。我们实际上得到了它。

于 2012-12-13T20:33:35.660 回答
0

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

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

于 2009-04-03T20:58:05.387 回答
0

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)
    });
于 2012-03-01T14:48:04.647 回答
0

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

要获得 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; }

于 2015-02-09T20:54:10.267 回答