Question

我有一个对话框，对话框中有一个datepicker字段。

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

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

有人可以帮助我吗？

韩国社交协会

Answer 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）中使用。

Answer 2

for 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，因此需要这么做。

Answer 3

这对我有用：

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

Answer 4

将以下样式放在'input'文本元素中：“position：relative; z-index：100000;”。

datepicker div从输入中获取z-index，但仅当位置是相对的时才有效。

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

Answer 5

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

Answer 6

for jquery-ui-1.7.2

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

Answer 7

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

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

Answer 8

我通过调用

来实现它

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

Answer 9

我很震惊：

a）这里没有人提到过设置datepicker z-Index的程序化解决方案 b）jQuery DatePicker没有选项可以在将z-Index绑定到元素时传递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的日期选择器绑定到一个元素，即$（“＃some_element”）。日期选择器（），当时我们设定的目标元素的样式，以便日期选择器将搭载来自的z-index它。感谢Ronye Vernaes（在本页的回答中）指出，如果目标元素的z-Index有一个并且设置为position：

，它将获取目标元素的z-Index。

$(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更高。当点击datepicker图标时，它将从input元素中获取该z-index，因为，正如Ronye Vernaes所提到的，样式位置：relative。

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

Answer 10

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

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

Answer 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)
    });

Answer 12

现在，datepicker将弹出窗口z-index设置为比其关联字段多一个，以使其保持在该字段的前面，即使该字段本身位于弹出对话框中。默认情况下，z-index为0，因此datepicker最终为1.是否存在未正确显示datepicker的情况？ JQuery Forum Post

要获得100的z索引。您需要输入z-index:99;，JQueryUI会将datepicker更新为z-index:100

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

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

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

jQuery Dialog和Datepicker插件有问题

12 个答案: