Jquery 日期选择器 z-index 问题

Question

我有一个幻灯片 div，并且在该 div 上方有一个 datepicker 字段。

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

我把脚本写成：

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

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

有人可以帮助我吗？

Answer 1

将以下样式放在“输入”文本元素中： position: relative; z-index: 100000; position: relative; z-index: 100000; .

datepicker div 从输入中获取 z-index，但这仅在 position 是相对的情况下才有效。

使用这种方式，您不必从 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

添加到贾斯汀的回答中，如果您担心标记不整洁，或者您不希望在 CSS 中硬编码此值，您可以在显示之前设置输入。 像这样的东西：

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

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

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

Answer 6

我通过点击解决了这个问题：

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

Answer 7

我有一个使用日期选择器的对话框。 它总是被隐藏起来。 当我调整 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  } ); }                    
            });

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

Answer 8

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

Answer 9

那是什么解决了我的问题：

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

Answer 10

In fact you can effectively add in your css .ui-datepicker{ z-index: 9999;important;} but you can modify jquery-ui.css or jquery-ui.min.css and add at the end of the ui-datepicker class z-index: 9999;important; . 这两件事都对我有用（你只需要一个；-)）

Answer 11

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

Answer 12

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

Answer 13

我也有这个问题，因为 datepicker 使用输入的 z-index，我添加了以下 css

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

只需使用适用于您的规则，通过父 ID class，或者在我的情况下是引导对话框，使用它们的输入组和表单控件。

Answer 14

我不得不

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