jquery-ui datepicker更改z-index [英] jquery-ui datepicker change z-index

问题描述

问题很简单，尽管我很难想出如何解决它。

我正在使用一个jQuery-ui datepicker与定制的ios风格开/关切换。这个切换使用一些绝对定位的元素，目前正在我的日期选择器上显示。

看到下面的6月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}）; 
} 
}）; 
  

但是，每次启动datepicker时，z-index似乎都被覆盖。

任何帮助不胜感激！

解决方案

您的JS代码在问题中不起作用，因为jQuery重置样式 z-index 是一个！重要的 CSS规则，如另一个答案。另一个回答建议设置 position：relative; 和 z-index 在输入元素本身将被自动复制到Datepicker窗口小部件。

但是，根据要求，如果无论什么原因，您真的需要动态设置，添加更多不必要的代码和处理到您的页面，您可以尝试这样：

  $（'。date_field'）。datepicker（{
 //注释beforeShow处理程序，如果你想看到丑陋的覆盖面
 beforeShow：function（）{
 setTimeout（function（）{
 $（'。ui-datepicker'）。css（'z-index'，99999999999999）; 
}，0）; 
} 
}）; 
  

小提琴

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

CSS黑客远远不那么丑陋的IMO，我只在jQuery UI调整的CSS中保留一个空间（这正好在IE6调整之上我的网页）。

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.

see the ugly circle covering july 6th below...

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.

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.

any help is appreciated!

解决方案

Your JS code in the question doesn't work because jQuery resets the style attribute of the datepicker widget every time you call it.

An easy way to override its style's z-index is with a !important CSS rule as already mentioned in another answer. Yet another answer suggests setting position: relative; and z-index on the input element itself which will be automatically copied over to the Datepicker widget.

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);
    }
});

Fiddle

​I created a deferred function object to set the z-index of the widget, after it gets reset'ed by the jQuery UI, every time you call it. It should suffice your needs.

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).

这篇关于jquery-ui datepicker更改z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！