jQuery Dialog和Datepicker插件有问题

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)工作.

经过几分钟的探索,jQuery Dialog似乎每次都会增加其z-index.我不确定这是不是一个bug,但是将`#ui-datepicker-div`z-index设置为9999可以修复它. (6认同)
只是为了更新这个答案,它现在需要是z-index:1002.JQuery Dialog使用内联样式:`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;"` (2认同)

Answer 2

对于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;
    }