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

enter image description here

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相关问答推荐

通过 Ajax POST 将按钮值从 HTML 发送到 Flask 时出现空数据

如何限制select2中的字符?

jQuery .first() 方法返回第一个元素的集合

jQuery找到最近的匹配元素

在 JavaScript 中解析 URL

如何通过 Select 插件使用 jQuery 验证?

jQuery用另一个类替换一个类

聚焦 时防止 iphone 默认键盘

jquery:更改URL地址而不重定向?

使用 jQuery 将宽度设置为百分比

DataTables:无法读取未定义的属性长度

在jquery中查找具有某个属性值的所有元素

禁用 jquery Select 的下拉菜单

查找 id 以开头的 html 元素

如何防止使用光标拖动 Select 文本/元素

调整浏览器大小时如何自动居中 jQuery UI 对话框?

如何删除集中的 contenteditable pre 周围的边框?

如何在 DOM 中移动 iFrame 而不会丢失其状态?

清除表jquery

使用 jQuery 检测元素内容的变化