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

问题描述

这个问题很简单，虽然我很难想出如何解决它。

The problem is pretty straight forward although I'm having a hard time figuring out just how to solve it.

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

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.

查看覆盖7月6日以下的丑陋圈子

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

>

这样做的脏方式（至少imo）是在我的样式表中写一个样式，但是当选择器启动来完成这个时，我宁愿使用一些javascript。

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.

我已经尝试过

$('.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。

but it seems the z-index get overwritten each time the datepicker is launched.

任何帮助是感谢！

推荐答案

问题中的JS代码不工作，因为jQuery重置 style

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

一个简单的方法来覆盖它的 style s z-index 与！important stackoverflow.com/questions/715677/trouble-with-jquery-dialog-and-datepicker-plugins\">另一个答案。另一个回答建议设置 position：relative; 和 z-index 在输入元素本身，将自动复制到Datepicker小部件。

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

我创建了一个延迟函数对象来设置 z-index 的小部件，它被重置后的jQuery UI，每次你调用它。

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

CSS hack是丑陋的IMO，我在我的CSS中保留一个空间只用于jQuery UI调整（就在IE6调整之上我的网页）。

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 change z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！