Jquery日期选择器z索引问题

Question

我有一个幻灯片 div，并且在该 div 上方有一个日期选择器字段。

当我单击日期选择器字段时，日期选择器面板显示在幻灯片 div 后面。

我将脚本设置为：

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

所以我无法更改CSS中datepicker的z索引。脚本生成的日期选择器的 z 索引是 1，我的幻灯片 div（也通过 googleajaxapi 调用）z 索引是 5。所以我想我必须将日期选择器的 z 索引增加到大于 5。所以有吗有什么办法可以增加吗？

有人可以帮助我吗？

Answer 1

将以下样式放置在“输入”文本元素处： position:relative; z 索引：100000；。

datepicker div 从输入中获取 z-index，但这仅在位置是相对的时有效。

使用这种方式，您不必从 jQuery UI 修改任何 javascript。

Answer 2

只需在您的 CSS 中使用 '.ui-datepicker{ z-index: 9999 !important;}' 这里 9999 可以替换为您希望日期选择器可用的任何图层值。任何代码都不应被注释，也不应在输入元素上添加“position:relative;”CSS。因为增加输​​入元素的 z-index 将对所有输入类型按钮产生影响，这在某些情况下可能不需要。

Answer 3

为我工作

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

Answer 4

基于marksyzm答案，这对我有用：

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

Answer 5

我有一个使用日期选择器的对话框。它一直是隐藏的。当我调整 z-index 时，下部表单上的字段始终显示在对话框中。

我使用了我所看到的解决方案的组合来解决该问题。

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

before show 确保日期选择器在选择时始终位于顶部，但 onClose 确保重置字段的 z-index，以便它不会与稍后使用不同日期选择器打开的任何对话框重叠。

Answer 6

添加贾斯汀的答案，如果您担心标记不整齐或者您不希望在 CSS 中硬编码该值，您可以在显示之前设置输入。像这样的事情：

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

请注意，您不能省略 "position": "relative" 规则，因为插件要么在两个规则或样式表的内联样式中查找，但不能同时查找两者。

dialog("widget") 是弹出的实际日期选择器。

Answer 7

我通过使用单击解决了这个问题：

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

Answer 8

请参阅此处： http://forum.jquery.com/topic/ z-index-1-datepicker-1-8

Answer 9

我有一个页面，其中日期选择器位于 datatables.net tabletools 按钮的顶部。
数据表按钮比单个日期选择器日期按钮具有更高的 z-index。
感谢Ronye的回答，我能够通过使用position:relative;来解决这个问题。 z 索引：10000。
谢谢！

Answer 10

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

Answer 11

这解决了我的问题：

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

Answer 12

事实上，您可以有效地在 css 中添加 .ui-datepicker{ z-index: 9999 !important;} 但您可以修改 jquery-ui.css 或 jquery-ui.min.css 并添加到 ui-datepicker 类的末尾 z-index: 9999 !important;。这两件事都对我有用（你只需要一个;-)）

Answer 13

我不得不

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

Answer 14

我也遇到了这个问题，因为日期选择器使用输入的 z-index，所以我添加了以下 css

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

只需采用适用于您的规则，通过父 id、类，或者在我的情况下是引导对话框，使用它们的输入 -组和形式控制。

Answer 15

30脉冲尝试
最后我明白了。 工作

.modal {
    z-index: 1040; // Bootstrap 3 Model
}
.ui-datepicker {
    z-index: 1041 !important;
}

Answer 16

对我来说问题是日期选择器从最近的具有 z 索引的父级获取 z 索引，然后添加 +1。假设 z-index 最接近的值是 1000，那么日期选择器得到 1001。

但是！当你仍然有一个具有更高 z-index 的父元素时，你就会遇到问题！

<div style="z-index: 2000">
    <!-- The highest parent has 2000 -->
    <div style="z-index: 1000">
        <!-- the closest parent has 1000 -->
        <input class"datepicker" />
        <!-- your datepicker popup will get 1001 -->
        <!-- but that is too low to go over your outer parent's z-index of 2000 -->
    </div>
</div>

所以这实际上是你父母的z-indexs的问题。