Javascript jquery-ui datepicker 更改 z-index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11533161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery-ui datepicker change z-index
提问by Greg Guida
The problem is pretty straight forward although I'm having a hard time figuring out just how to solve it.
这个问题很简单，虽然我很难弄清楚如何解决它。
I'm using a jQuery-ui datepicker along with a custom made "ios style on/off toggle". This toggle uses some absolutely positioned elements which are currently showing up on top of my date picker.
我正在使用 jQuery-ui 日期选择器以及定制的“ios 样式开/关切换”。此切换使用一些当前显示在我的日期选择器顶部的绝对定位元素。
see the ugly circle covering july 6th below...
看到下面7月6日的丑陋圆圈......
the dirty way to do this (at least imo) is to write a style in one of my stylesheets, but I'd much rather use some javascript when the picker launches to get this done.
执行此操作的肮脏方法（至少 imo）是在我的一个样式表中编写样式，但我更愿意在选择器启动时使用一些 javascript 来完成此操作。
I've already tried
我已经试过了
$('.date_field').datepicker();
$('.date_field').datepicker("widget").css({"z-index":100});
and
和
$('.date_field').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({"z-index":100});
}
});
but it seems the z-index get overwritten each time the datepicker is launched.
但似乎每次启动日期选择器时 z-index 都会被覆盖。
any help is appreciated!
任何帮助表示赞赏！
回答by Fabrício Matté
Your JS code in the question doesn't work because jQuery resets the styleattribute of the datepicker widget every time you call it.
您在问题中的 JS 代码不起作用，因为style每次调用它时jQuery 都会重置datepicker 小部件的属性。
An easy way to override its style's z-indexis with a !importantCSS rule as already mentioned in another answer. Yet another answersuggests setting position: relative;and z-indexon the input element itself which will be automatically copied over to the Datepicker widget.
覆盖其style's 的一种简单方法z-index是使用另一个答案中!important已经提到的CSS 规则。另一个答案建议在 input 元素本身上设置和，这将自动复制到 Datepicker 小部件。position: relative;z-index
But, as requested, if for whatever reason you really need to set it dynamically, adding more unnecessary code and processing to your page, you can try this:
但是，根据要求，如果出于某种原因您确实需要动态设置它，向您的页面添加更多不必要的代码和处理，您可以尝试以下操作：
$('.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);
}
});
?I created a deferred function object to set the z-indexof the widget, after it gets reset'ed by the jQuery UI, every time you call it. It should suffice your needs.
?我创建了一个延迟函数对象来设置z-index小部件的，在它被 jQuery UI 重置后，每次你调用它。它应该足以满足您的需求。
The CSS hack is far less ugly IMO, I reserve a space in my CSS only for jQuery UI tweaks (that's right above the IE6 tweaks in my pages).
CSS hack 远没有那么难看 IMO，我在 CSS 中保留了一个空间仅用于 jQuery UI 调整（在我的页面中 IE6 调整的正上方）。
回答by Marek Roj
There is a more elegant way to do it. Add this CSS:
有一种更优雅的方法来做到这一点。添加这个CSS：
.date_field {position: relative; z-index:100;}
jQuery will set the calendar's z-indexto 101 (one more than the corresponding element). The positionfield must be absolute, relativeor fixed. jQuery searches for the first element's parent, which is absolute/relative/fixed, and takes its' z-index
jQuery 会将日历设置z-index为 101（比相应元素多 1）。该position字段必须是absolute,relative或fixed。jQuery 搜索第一个元素的父元素，它是绝对/相对/固定的，并取其'z-index
回答by Emanuele Greco
You need to use !importantclause to force the in-line z-indexvalue using CSS.
您需要使用!important子句来强制z-index使用 CSS的内联值。
.ui-datepicker{z-index: 99 !important};
回答by David Hicks
This worked for me when I was trying to use datepicker in conjunction with a bootstrap modal:
当我尝试将 datepicker 与引导模式结合使用时，这对我有用：
$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
e.preventDefault();
$(this).datepicker('show');
$(this).datepicker('widget').css('z-index', 1051);
});
Of course, change the selector to fit your own need. I set the "z-index" to 1051 because the z-index for the bootstrap modal was set to 1050.
当然，更改选择器以满足您自己的需要。我将“z-index”设置为 1051，因为引导模式的 z-index 设置为 1050。
回答by Loren
The datepicker now sets the popup z-index to one more than its associated field, to keep it in front of that field, even if that field is itself in a popup dialog. By default the z-index is 0, so datepicker ends up with 1. Is there a case where this is not showing the datepicker properly? JQuery Forum Post
日期选择器现在将弹出的 z-index 设置为比其关联字段大 1 的值，以将其保持在该字段的前面，即使该字段本身在弹出对话框中也是如此。默认情况下，z-index 为 0，所以 datepicker 以 1 结束。是否存在不能正确显示 datepicker 的情况？JQuery 论坛帖子
To get a z-index of 100. You need an input with z-index:99;and JQueryUI will update the datepicker to be z-index:100
要获得 100 的 z-index。您需要一个输入，z-index:99;JQueryUI 会将日期选择器更新为z-index:100
<input style="z-index:99;">or <input class="high-z-index">and css .high-z-index { z-index: 99; }
<input style="z-index:99;">或<input class="high-z-index">和 css .high-z-index { z-index: 99; }
You can also specify the z-index to inherit which should inherit from your dialog box and cause jQueryUI to properly detect the z-index.
您还可以指定要从对话框继承的 z-index，并使 jQueryUI 正确检测 z-index。
<input style="z-index:inherit;">or <input class="inhert-z-index">and css .inherit-z-index { z-index: inherit; }
<input style="z-index:inherit;">或<input class="inhert-z-index">和 css .inherit-z-index { z-index: inherit; }
回答by clinton
The BEST NATURAL way is to simply put the date-picker element on a "platform" that has a "relative" position and has a higher "z-index" than the element that is showing up above your control...
最好的自然方法是简单地将日期选择器元素放在一个“平台”上，该“平台”具有“相对”位置，并且“z-index”比显示在您的控件上方的元素更高......
回答by Francisco G
In my case nothing worked. I needed to add the z-index to the input type that has the datepicker.
就我而言，没有任何效果。我需要将 z-index 添加到具有日期选择器的输入类型。
<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
回答by shubham kumar
This is for Bootstrap datetimepicker
这是用于 Bootstrap 日期时间选择器
If your datepicker is hiding because of scroll appears in your div use:
如果您的日期选择器由于滚动出现在您的 div 中而隐藏，请使用：
overflow-x: visible !important;
overflow-y: visible !important;
in css of whole div that contain your datepicker and other item such as
在包含您的日期选择器和其他项目的整个 div 的 css 中，例如
.dialogModel{
overflow-x: visible !important;
overflow-y: visible !important;
}
