Jquery 日期选择器 z 索引问题

问题描述 投票：0回答：16

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

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

我将脚本设置为：

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

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

有人可以帮助我吗？

jquery jquery-plugins uidatepicker
16个回答
183
投票

将以下样式置于“输入”文本元素：

position: relative; z-index: 100000;
。

日期选择器 div 从输入中获取 z-index，但这仅在位置是相对的情况下才有效。

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

156
投票

只需在您的 CSS 中使用 '

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

17
投票

为我工作

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

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

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

我有一个使用日期选择器的对话框。它一直是隐藏的。当我调整 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 索引，以便它不会与稍后使用不同日期选择器打开的任何对话框重叠。

5
投票

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

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

请注意，您不能省略 

"position": "relative"
规则，因为插件要么在内联样式中查找两个规则或样式表，但不能同时查找两个。

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

5
投票

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

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

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

1
投票

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

1
投票

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

1
投票

这解决了我的问题：

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

事实上，您可以有效地在CSS中添加

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

1
投票

我不得不

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

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

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

只需采用适用于您的规则，无论是通过父 ID、类别，还是在我的情况下，使用引导对话框，使用其输入组和表单控件。

0
投票

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

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

0
投票

对我来说，问题是日期选择器从最近的具有 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的问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.