这个问题很直截了当,尽管我很难找到解决方法.

我正在使用一个jQuery-UI日期选择器和一个定制的"iOS风格开/关切换".此切换使用一些绝对定位的元素,这些元素当前显示在我的日期选取器的顶部.

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

但每次启动日期选择器时,z索引似乎都会被覆盖.

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

如何在外部JS文件中使用带有参数的laravel路由

如何通过javascript数组中的键和值查找对象的索引

ESLint 美元($)未定义. (无非定义)

将参数附加到 URL 而不刷新

未捕获的 TypeError:data.push 不是函数

用于活动选项卡更改的 Bootstrap 3 jquery 事件

使用 Webpack 将 jQuery 公开给真实的 Window 对象

如何使用新的 JSON 数据手动更新数据表

如何在 bootstrap 模式关闭并重新打开时重置 bootstrap 模式?

为什么我应该创建异步 WebAPI 操作而不是同步操作?

由于滚动,响应表内的 bootstrap 按钮下拉菜单不可见

使用 Typescript 时如何停止“类型 JQuery 上不存在属性”语法错误?

你能在不影响历史的情况下使用哈希导航吗?

将图像 url 转换为 Base64

Drop 事件未在 chrome 中触发

试图检测浏览器关闭事件

Jquery判断元素是否在视口中可见

Codemirror 编辑器在单击之前不会加载内容

使用 Bootstrap 3 下拉菜单作为上下文菜单

单击时平滑滚动到特定的 div