jquery-ui datepicker更改z-index
jquery-ui datepicker更改z-index
提问于 2012-07-18 09:41:08
这个问题非常简单，尽管我很难弄清楚如何解决它。
我使用了一个jQuery-ui datepicker和一个定制的"ios风格开关“。此切换使用一些绝对定位的元素，这些元素当前显示在我的日期选择器的顶部。
请看下面覆盖7月6日的丑陋的圆圈。
最糟糕的方法(至少是imo)是在我的样式表中编写一个样式，但我更愿意在选择器启动时使用一些javascript来完成这项工作。
我已经试过了
$('.date_field').datepicker();
$('.date_field').datepicker("widget").css({"z-index":100});和
$('.date_field').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({"z-index":100});
}
});但似乎每次启动datepicker时，z索引都会被覆盖。
如有任何帮助，我们不胜感激！
回答 6
Stack Overflow用户
发布于 2013-07-18 23:25:56
有一种更优雅的方法。添加此CSS：
.date_field {position: relative; z-index:100;}jQuery会将日历的z-index设置为101 (比相应的元素多一个)。position字段必须为absolute、relative或fixed。jQuery搜索第一个元素的父元素，它是绝对/相对/固定的，并获取它的‘z-index
Stack Overflow用户
发布于 2015-07-27 18:32:51
您需要使用CSS子句来强制使用CSS的内联z-index值。
.ui-datepicker{z-index: 99 !important};Stack Overflow用户
发布于 2016-07-07 02:34:55
当我尝试将datepicker与bootstrap模式结合使用时，这对我很有效：
$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
e.preventDefault();
$(this).datepicker('show');
$(this).datepicker('widget').css('z-index', 1051);
});当然，更改选择器以满足您自己的需要。我将" z-index“设置为1051，因为bootstrap模式的z-index设置为1050。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11533161
复制相关文章
相似问题