jquery-ui datepicker更改z-index答案

【问题标题】：jquery-ui datepicker change z-indexjquery-ui datepicker更改z-index
【发布时间】：2012-07-17 00:05:29
【问题描述】：

这个问题很简单，虽然我很难弄清楚如何解决它。

我正在使用 jQuery-ui 日期选择器以及定制的“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});
    }
});

但似乎每次启动日期选择器时 z-index 都会被覆盖。

感谢任何帮助！

【问题讨论】：

我认为你的页面 css 上的 css !important 规则比 javascript 更干净，因为 z-index is 是一个 CSS 属性并且用于样式设置。如果我必须做一个 JS 解决方案，它会在头部附加一个 style 标记 - 不仅在 CSS 中使用它可以让你的 JS 代码更短更干净，而且还可以无缝地应用于所有日期选择器实例。
stackoverflow.com/questions/715677/…的可能重复
@Lance 不是骗子，因为我在问如何在不向 css 添加一行的情况下动态完成它
@FabrícioMatté 我想我只是不想用一些愚蠢的覆盖来弄乱我的 css 以用于 jquery-ui 边缘案例。头部中的style 标记更接近于我正在寻找的内容，但我真正想做的是更改日期选择器元素上的样式属性。
我已经在 CSS 文件的底部保留了一个空间，仅用于我开始的每个项目中的 jQuery UI hack，但是是的，我提交了一个纯 jQuery 解决方案的答案，解释了为什么 CSS 会更干净解决方案，现在您可以选择使用哪一个。 =]

标签： javascript jquery css jquery-ui datepicker

【解决方案1】：

您在问题中的 JS 代码不起作用，因为每次调用时 jQuery 都会重置 datepicker 小部件的 style 属性。

覆盖其style 的z-index 的简单方法是使用!important CSS 规则，如another answer 中所述。还有一个answer 建议在输入元素本身上设置position: relative; 和z-index，这将自动复制到Datepicker 小部件。

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

$('.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);
    }
});

Fiddle

我创建了一个延迟函数对象来设置小部件的z-index，在它被 jQuery UI 重置后，每次调用它。它应该可以满足您的需求。

CSS hack 远没有 IMO 丑陋，我在我的 CSS 中保留了一个空间，仅用于 jQuery UI 调整（就在我页面中的 IE6 调整之上）。

【讨论】：

我可以告诉你你有多摇滚！？首先尝试了无数其他的东西。谢谢！
感谢您的回答，它可以工作，但是一旦刷新日期选择器（例如您更改月份），z-index 就会设置回默认值，所以我认为这个答案需要一个小的调整，即添加如下onChangeMonthYear：function() { setTimeout(function(){ $('.ui-datepicker').css('z-index', 99999999999999); }, 0); }
@Gombo 我相信如果你使用其中一种 CSS 方法（上面描述的 JS 方法）会更容易，因为这些方法远不那么骇人听闻。 ;)
至少在 FF 中，最大数字是 10 位数字，所以 9 个 9 可能会更好（尽管 FF 很乐意转换为 2147483647 而不会出错）。
+1 用于指出将 z-index 设置为输入 DOM。那是唯一对我有用的东西：<input .... style="z-index: 9999;"/>

【解决方案2】：

有一种更优雅的方法可以做到这一点。添加这个 CSS：

.date_field {position: relative; z-index:100;}

jQuery 会将日历的z-index 设置为101（比相应元素多一个）。 position 字段必须是 absolute、relative 或 fixed。 jQuery 搜索第一个元素的父元素，它是绝对/相对/固定的，并取其'z-index

【讨论】：

这绝对是最好的解决方案。 +1
工作就像一个魅力！谢谢
完美但在我的情况下：.datepicker-dropdown {z-index:999999 !important;}
几乎完美，但如果您不知道希望 datepicker 自行施加的 zindex 的最大值，则它不起作用。

【解决方案3】：

您需要使用 !important 子句强制使用 CSS 的内联 z-index 值。

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

【讨论】：

抱歉对我不起作用 - z-index 是由 jQuery 在元素上设置的，它的优先级高于 !important
@DylanHamilton-Foster 你确定吗？您能否添加一些其他标签，即 BackgroundColor，以查看是否实际应用了样式？

【解决方案4】：

当我尝试将 datepicker 与引导模式结合使用时，这对我有用：

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

当然，更改选择器以适合您自己的需要。我将“z-index”设置为 1051，因为引导模式的 z-index 设置为 1050。

【讨论】：

【解决方案5】：

日期选择器现在将弹出窗口 z-index 设置为比其关联字段多一，以将其保持在该字段的前面，即使该字段本身在弹出对话框中也是如此。默认情况下，z-index 为 0，因此 datepicker 以 1 结束。是否存在无法正确显示 datepicker 的情况？ JQuery Forum Post

要获得 100 的 z-index。您需要输入 z-index:99;，JQueryUI 会将日期选择器更新为 z-index:100

<input style="z-index:99;"> 或 <input class="high-z-index"> 和 css .high-z-index { z-index: 99; }

您还可以指定要从对话框继承的 z-index，并让 jQueryUI 正确检测 z-index。

<input style="z-index:inherit;"> 或 <input class="inhert-z-index"> 和 css .inherit-z-index { z-index: inherit; }

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

【讨论】：

请添加有意义的代码并描述更多您的BEST NATURAL way

【解决方案8】：

这适用于 Bootstrap 日期时间选择器

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

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

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

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

【讨论】：

【解决方案9】：

添加这个：

    $(document).ready(function()
    {
      $('#datepickers-container').css('z-index', 999999999);
    };

【讨论】：