jquery-ui datepicker更改z-index

Question

这个问题很简单,虽然我很难搞清楚如何解决它.

我正在使用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-index.

任何帮助表示赞赏!

Answer 1

问题中的JS代码不起作用,因为jQuery style每次调用它时都会重置datepicker小部件的属性.

覆盖它style的一个简单方法z-index是使用!importantCSS规则,如另一个答案中已经提到的那样.另一个答案建议设置position: relative;和z-index输入元素本身,它将自动复制到Datepicker小部件.

但是,根据要求,如果由于某种原因您确实需要动态设置它,向页面添加更多不必要的代码和处理,您可以尝试这样做:

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

小提琴

z-index每次调用它时,我都会创建一个延迟函数对象,以便在jQuery UI重置之后设置它.它应该满足您的需求.

CSS hack远没有那么丑陋的IMO,我在我的CSS中只为jQuery UI调整保留了一个空间(这正好在我的页面中的IE6调整之上).

Answer 2

有一种更优雅的方式来做到这一点.添加此CSS:

.date_field {position: relative; z-index:100;}

jQuery会将日历设置z-index为101(比相应的元素多一个).该position字段必须是absolute,relative或fixed.jQuery搜索第一个元素的父元素,它是绝对的/相对的/固定的,并且采用它的'z-index

Answer 3

您需要使用!important子句来z-index使用CSS 强制使用内联值.

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

Answer 4

当我尝试将 datepicker 与引导模式结合使用时，这对我有用：

$('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，因为引导模式的 z-index 设置为 1050。

Answer 5

日期选择器现在将弹出的 z-index 设置为比其关联字段大 1，以将其保持在该字段的前面，即使该字段本身在弹出对话框中也是如此。默认情况下，z-index 为 0，因此日期选择器以 1 结束。是否存在无法正确显示日期选择器的情况？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; }