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每次调用时都会重置datepicker小部件的style属性。

覆盖style z-index !important的简单方法是使用another answer中已提及的position: relative; CSS规则。另一个answer建议在输入元素本身上设置z-index和$('.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); } }); ，它将自动复制到Datepicker小部件。

但是，根据要求，如果出于某种原因你真的需要动态设置它，添加更多不必要的代码并处理到你的页面，你可以试试这个：

z-index

Fiddle

我创建了一个延迟函数对象来设置小部件的{{1}}，在每次调用它之后由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子句使用CSS强制使用内嵌z-index值。

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

Answer 4

当我尝试将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);
});

当然，更改选择器以满足您自己的需要。我设置了＆＃34; z-index＆＃34;到1051，因为bootstrap模态的z-index设置为1050。

Answer 5

  

现在，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; }

Answer 6

最佳自然方式是简单地将日期选择器元素放在一个“平台”上，该平台具有“相对”位置，并且具有比显示在控件上方的元素更高的“z-index”...

Answer 7

就我而言，没有任何效果。 我需要将z-index添加到具有日期选择器的输入类型。

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

Answer 8

这是用于Bootstrap datetimepicker

如果您的日期选择器由于滚动而被隐藏在div中，请使用：

overflow-x: visible !important;
overflow-y: visible !important;

整个div的css中，其中包含日期选择器和其他项，例如

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}