blocks|key|1589666|text|对于jquery-ui-1.8|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589667|<style+type="text/css">
++++.ui-datepicker
++++{
++++++++z-index:+1003+!important;+/*+must+be+>+than+popup+editor+(1002)+*/
++++}
</style>|code-block|syntax|javascript|1589668|这一点很重要，因为datepicker有一个将z-+element.style设置为1的索引。|1589669|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

for jquery-ui-1.8

<pre><code>&lt;style type="text/css"&gt;
 .ui-datepicker
 {
 z-index: 1003 !important; /* must be &gt; than popup editor (1002) */
 }
&lt;/style&gt;
</code></pre>

The important is needed since the datepicker has an element.style which sets z-index to 1.

blocks|key|1374530|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374531|.ui-datepicker+{
++++++++z-index:+9999+!important;
++++}|code-block|syntax|javascript|1374532|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me:

<pre><code>.ui-datepicker {
 z-index: 9999 !important;
 }
</code></pre>

blocks|key|1589716|text|将以下样式放在'input‘文本元素中："position:+relative；z-index:+100000;“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589717|datepicker+div从输入中获取z索引，但只有在位置是相对的情况下才有效。|1589718|使用这种方式，您不需要修改jQuery+UI中的任何javascript。|1589719|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

Put the following style at the 'input' text element: "position: relative; z-index: 100000;". 

The datepicker div takes the z-index from the input, but this works only if the position is relative.

Using this way you don't have to modify any javascript from jQuery UI.

blocks|key|1589532|text|从UI版本1.7.2开始，ui-datepicker-div不再是有效的css元素。"ui-datepicker“似乎是最外面的包装器，据我所知，将z-index设置为99999对我来说是正确的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589533|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

As of UI version 1.7.2 ui-datepicker-div is no longer a valid css element. "ui-datepicker" seems to be the outmost wrapper and setting the z-index to 99999 is working correctly for me as far as I know

blocks|key|1374375|text|对于jquery-ui-1.7.2|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374376|<style+type="text/css">
++++.ui-datepicker
++++{
++++++++z-index:+1003;+/*+must+be+>+than+popup+editor+(1002)+*/
++++}
</style>|code-block|syntax|javascript|1374377|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

for jquery-ui-1.7.2

<pre><code>&lt;style type="text/css"&gt;
 .ui-datepicker
 {
 z-index: 1003; /* must be &gt; than popup editor (1002) */
 }
&lt;/style&gt;
</code></pre>

blocks|key|1374399|text|将此设置在页面顶部。它将工作得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374400|<style+type="text/css">
.ui-datepicker+{z-index:10100;}
</style>|code-block|syntax|javascript|1374401|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Set this in your top of your page. It will work fine:

<pre><code>&lt;style type="text/css"&gt;
.ui-datepicker {z-index:10100;}
&lt;/style&gt;
</code></pre>

blocks|key|1589607|text|我打电话给你让它正常工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589608|$("#ui-datepicker-div").css("z-index",+"1003"+);|code-block|syntax|javascript|1589609|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I got it working by calling

<pre><code>$("#ui-datepicker-div").css("z-index", "1003" );
</code></pre>

blocks|key|1589778|text|令我震惊的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589779|a)这里没有人提到设置datepicker+z索引的编程解决方案b)+jQuery+DatePicker在将其绑定到元素时没有传递z索引的选项。|1589780|我使用js方法来计算最高指数。我们默认只检查div，因为这些是可能获得z索引值的元素，并且比解析页面上的每个元素更快，这是可以理解的。|1589781|/*+Get+the+highest+zindex+for+elements+on+the+page
*/
function+getHighestZIndex(element){
++++var+index_highest+=+0;
++++var+index_current;
++++if(element+==+undefined){
++++++++element+=+'div';
++++}
++++$(element).each(function(){
++++++++index_current+=+parseInt($(this).css("z-index"),+10);
++++++++if(index_current+>+index_highest)+{
++++++++++++index_highest+=+index_current;
++++++++}
++++});
++++return+index_highest;
}|code-block|syntax|javascript|1589782|因为我们必须使用javascript将datepicker绑定到一个元素，即$('#some_element').datepicker()，这时我们设置了目标元素的样式，这样datepicker将从它获取z索引。感谢Ronye+Vernaes+(在本页的回答中)指出，datepicker()将拾取目标元素的z-Index，如果它有z-Index并设置为position:+relative：|1589783|$(this.target).datepicker();
var+zindex+=+e.getHighestZIndex();
zindex%2B%2B;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);|1589784|this.target是我们在datepicker字段中创建的输入元素。在绑定时，我们获得页面上最高的z索引，并使元素的z索引更高。当datepicker图标被单击时，它将从输入元素中提取z索引，因为，正如Ronye+Vernaes提到的，样式position:+relative。|1589785|在这个解决方案中，我们不会尝试猜测最高的z-Index值。我们真的明白了。|1589786|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I'm shocked that:

a) no one here has mentioned a programmatic solution to setting the datepicker z-Index
b) there is no option for the jQuery DatePicker to pass a z-Index when binding it to an element.

I am using a js method to calculate the highest index. We default to checking only divs, because these are the likely elements to get a z-index value and is understandably quicker than parsing every element on the page.

<pre><code>/* Get the highest zindex for elements on the page
*/
function getHighestZIndex(element){
 var index_highest = 0;
 var index_current;
 if(element == undefined){
 element = 'div';
 }
 $(element).each(function(){
 index_current = parseInt($(this).css("z-index"), 10);
 if(index_current &gt; index_highest) {
 index_highest = index_current;
 }
 });
 return index_highest;
}
</code></pre>

Because we have to use javascript to bind the datepicker to an element, i.e. $('#some_element').datepicker(), at that time we set the target element's style so that datepicker will pick up the z-index from it. Thanks to Ronye Vernaes (in his answer on this page) for pointing out that datepicker() will pick up the target element's z-Index if it has one and is set to position: relative:

<pre><code>$(this.target).datepicker();
var zindex = e.getHighestZIndex();
zindex++;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);
</code></pre>

this.target is the input element we are making into a datepicker field.
At binding time, we get the highest z-index on the page and make the element's z-index one higher.
When datepicker icon is clicked, it will pick up that z-index from the input element, because, as Ronye Vernaes mentioned, of the style position: relative.

In this solution, we don't try and guess what the highest z-Index value is going to be. We actually GET IT.

blocks|key|1374324|text|该对话框在iframe中呈现，并在其他所有内容(包括下拉列表)之上呈现。同时，datepicker在普通的HTML中呈现，并被绝对定位。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374325|听起来datepicker绝对是相对于父页面呈现的，而不是iframe。你有没有试过把日历放在对话框内，作为一个标准的、非绝对定位的博客？或者你可以使用dropdowns来代替。|1374326|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The dialog is rendered in an iframe, and is rendered on top of everything else (including dropdowns). Meanwhile the datepicker is rendered in normal HTML and positioned absolutely.

It sounds like the datepicker is being rendered absolutely relative to the parent page instead of the iframe. Have you tried placing the calendar inside the dialog as just a standard, non-absolute-positioned blog? Or you could use dropdowns instead.

blocks|key|1374519|text|jquery+datepicker+1.8.3版本的解决方案，要更改z索引值，通过css进行更改并非不可能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374520|这个运行得很好：|1374521|jQuery('.ui-datepicker-trigger').click(function()+{
++++++++setTimeout(function()+{
++++++++++++jQuery('#ui-datepicker-div').css('z-index',+999);
++++++++},+500)
++++});|code-block|syntax|javascript|1374522|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Solution to jquery datepicker 1.8.3 version, to change z-index value, it is not impossible to change via css. 

This one works fine:

<pre><code>jQuery('.ui-datepicker-trigger').click(function() {
 setTimeout(function() {
 jQuery('#ui-datepicker-div').css('z-index', 999);
 }, 500)
 });
</code></pre>

I have a dialog, and I have a datepicker field on the dialog.

When I open the dialog and click in the datepicker field, the datepicker panel show behind dialog.

I try more properties: zindex, stack, bgiframe, but not success.

Someone can help me?

Tks.

Trouble with jQuery Dialog and Datepicker plugins

jQuery

我有一个对话框，并且对话框上有一个datepicker字段。当我打开对话框并单击datepicker字段时，datepicker面板显示在后面的对话框。我尝试了更多的属性: zindex、stack、bgiframe，但没有成功。有人能帮我吗？Tks。

问jQuery对话框和日期选择器插件出现问题
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery对话框和日期选择器插件出现问题EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery对话框和日期选择器插件出现问题
EN