JQuery的dateselect器Z指数的问题

我有一个幻灯片div,我有一个dateselect器字段上面的div。

当我点击dateselect器字段时,dateselect器面板显示在幻灯片div后面。

我已经把脚本作为:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

所以我不能改变CSS中的datepicker的z-index。 脚本生成的datepicker的z-index是1,我的幻灯片div(也通过googleajaxapi调用)z-index是5.所以我想我必须增加大于5的dateselect器的z-index。有什么办法来增加它?

有人可以帮助我吗?

把下面的样式放在'input'文本元素上: position: relative; z-index: 100000; position: relative; z-index: 100000;

datepicker div从input中获取z-index,但是这只在位置是相对的时才起作用。

使用这种方法,你不必修改任何从jQuery UI的JavaScript。

简单地在你的CSS中使用' .ui-datepicker{ z-index: 9999 !important;} '这里9999可以replace为你想让你的dateselect器可用的任何图层值。 任何代码都不能被评论,也不能添加' position:relative; input元素的CSS。 因为增加输​​入元素的z-index会影响所有inputtypes的button,在某些情况下可能不需要。

为我工作

 .hasDatepicker { position: relative; z-index: 9999; } 

基于marksyzm的答案,这对我工作:

 $('input').datepicker({ beforeShow:function(input) { $(input).css({ "position": "relative", "z-index": 999999 }); } }); 

除了Justin的回答,如果你担心乱七八糟的标记,或者你不想在CSS中硬编码,你可以在input之前设置input。 像这样的东西:

 $('input').datepicker({ beforeShow:function(input){ $(input).dialog("widget").css({ "position": "relative", "z-index": 20 }); } }); 

请注意,不能忽略"position": "relative"规则,因为插件要么以规则或样式表的内联样式查找,要么不是两者

dialog("widget")是popup的实际dateselect器。

我有这个问题,我解决了使用点击:

 var checkin = $('.dpd1').datepicker() .on('click', function (ev) { $('.datepicker').css("z-index", "999999999"); }).data('datepicker'); 

看到这里: http : //forum.jquery.com/topic/z-index-1-datepicker-1-8

我有一个页面,datepicker是在一个datatables.net tabletoolsbutton的顶部。 数据表button具有比单独的dateselect器datebutton更高的z-index。 感谢Ronye的回答,我能够通过使用position:relative来解决这个问题; 和z-index:10000。谢谢!

当我错过了这个主题的时候,这发生在我身上。 确保主题存在,或者重新下载主题,并将其重新上传到您的服务器。

那什么解决了我的问题:

  $( document ).ready(function() { $('#datepickerid').datepicker({ zIndexOffset: 1040 #or any number you want }); }); 

我也有这个问题,因为datepicker使用input的z-索引,我添加了下面的CSS

 #dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{ z-index:inherit; } 

只要采用适用于你的规则,无论是通过父母身份,class级,或在我的情况下引导对话框,使用他们的input组和表格控制。

事实上,你可以有效地添加你的css .ui-datepicker{ z-index: 9999 !important;}但是你可以修改jquery-ui.css或者jquery-ui.min.css并且添加到ui- jquery-ui.min.css的末尾class z-index: 9999 !important; 。 两个东西都适合我(你只需要一个;-))

我不得不

 .datepicker.dropdown-menu { position: relative; z-index: 9999 !important; }