Jquery日期选择器z-index问题

Posted 2023-05-07

【中文标题】Jquery日期选择器z-index问题

【英文标题】：Jquery date picker z-index issue

【发布时间】：2011-10-25 09:27:30

【问题描述】：

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

当我点击日期选择器字段时，日期选择器面板显示在幻灯片 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。所以有吗有什么办法增加吗？

有人可以帮助我吗？

【问题讨论】：

这里是解决方案***.com/questions/11533161/…

【参考方案1】：

在“输入”文本元素中添加以下样式：position: relative; z-index: 100000;。

datepicker div 从输入中获取 z-index，但这仅适用于相对位置。

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

【讨论】：

这样的问题是你的输入会显示在其他元素之上，这很少是想要的效果

当 datepicker 绑定到 span 时应该可以工作吗？

position : relative 是不可接受的，在我的情况下不起作用。下面的解决方案工作正常。

这不适用于 IE 11 浏览器。这个浏览器是特定的吗？

此解决方案虽然有效，但并非对所有情况都有效。最好是用一行 CSS '.ui-datepicker z-index: 9999 !important;'

覆盖

【参考方案2】：

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

【讨论】：

我必须使用datepicker 而不是ui-datepicker

JavaScript 在 2016 年仍然使用不连续的 z-indexes、任意堆叠上下文，并且存在跨浏览器兼容性问题？ ActionScript 3 FTW（十年前，今天仍然如此）。

仍然有效，已合并到刚刚添加到主题 style.css 中的 WordPress 网站

【参考方案3】：

为我工作

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

【参考方案4】：

基于 marksyzm 的回答，这对我有用：

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

【讨论】：

但这只会影响输入而不影响日期选择器覆盖？

我正在使用这个示例jqueryui.com/datepicker，它不使用日期选择器的图标。有了这个解决方案，我就没有遇到其他 Web 组件的问题了。

【参考方案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 确保选中时 datepicker 始终位于顶部，但 onClose 确保该字段的 z-index 被重置，以便它不会与稍后使用不同 datepicker 打开的任何对话框重叠。

【讨论】：

这个解决方案很棒，解决了我的问题。但是在“onClose”部分对其进行一些编辑。我放了$(this) 而不是$('.ui-datepicker')。因此，它会将z-index:0 设置为“此输入”，而不是所有带有 ui-datepicker 类的输入。

【参考方案6】：

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

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

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

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

【讨论】：

这个问题应该在 JqueryUI 脚本中解决，并且默认设置为防止覆盖。大多数用例都不希望任何输入覆盖日历输入功能。如果需要让输入（或其他元素）覆盖日历，那么应该使用这样的解决方案。话虽如此，@marksyzm 将是 IMO 的最佳解决方案，因为您只会在需要时应用它。

【参考方案7】：

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

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

【讨论】：

这个解决方案对我来说在弹出窗口上完美运行。谢谢！

【参考方案8】：

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

【参考方案9】：

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

【参考方案10】：

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

【参考方案11】：

这解决了我的问题：

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

【参考方案12】：

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

【参考方案13】：

我不得不

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

【参考方案14】：

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

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

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