jQuery UI datepicker z-index默认为1 怎么处理
最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker。
这个控件生成的日期选择框的z-index = 1。问题来了。页面上有不少z-index比1大的标签。我在网上搜了一下,发现有好多人都遇到了同样的问题。解决方法大体上有两种。
下面我结合demo,一起看一下。
我们先按照jQuery UI datepicker API 文档(地址我就不写了,应该能搜得到)写一个基本的demo,body中的代码如下:
<body> <p>日期:<input type="text" id="datepicker" style="position: relative;"></p>
<div style="position: relative; width: 200px; height: 300px;">
<p style="position: absolute; z-index: 10;top:2px;left: 50px;">哈哈!挡不住我!!</p> </div>
<script>
$(function() {
$( "#datepicker" ).datepicker({});
});
</script> </body>
效果如下:
看到了吗我们的日期控件没有挡住页面中的 <p>哈哈!挡不住我!!</p>
打开调试器我们发现<p>的z-index为10,而日期控件的z-index仅仅为1。
而且我手动修改控件弹窗后,也仅仅是当时有效,点击空白处(关闭控件),再次触发控件显示,控件的z-index就又是1了。
网上有两个方法:
方法1:延时修改样式
datepicker有一个回调函数——beforeShow: function(input){},参数input是触发日期控件的input。可惜拿不到生成的控件窗体。但控件有个id="ui-datepicker-div"(控件默认自带)。我们在这个回调中利用这个id延时处理一下:
$( "#datepicker" ).datepicker({
beforeShow: function () {
setTimeout(function () {
$('#ui-datepicker-div').css("z-index", 20);
}, 100);
}
});
效果:
看来方法1是有效的,但是页面上有多个实例的时候利用id拿到的还可靠吗?我们来看一下方法2
方法2:为什么z-index 会等于1?
分析datepicker的源码,发现弹出的日期选择框的z-index值是:$(input).zIndex() + 1。继续分析$.zIndex()函数(在jquery-ui.js文件中),发现当input的css position值为absolute、fixed或relative时,$.zIndex()函数返回的值就是input css 的z-index值。
例如:<input type="text" name="add_date" id="add_date" style="z-index:10;position:relative;" value="" />这样设置时,弹出的jquery-ui datepicker日期选择框的z-index值就设置为11了。
代码如下:设置input的z-index
<p>日期:<input type="text" id="datepicker" style="position: relative;z-index:20;"></p>
$( "#datepicker" ).datepicker({});
看效果:
方法2 有效,但是方法2 也有问题,如果下面有个另一个日期控件,它的z-index为11(10+1)的弹层可能会挡不住这个input了吗。
当然我们可以每次在input 的mouseenter的时候修改z-index增大,mouseleave的时候在减小。
$( "#datepicker" ).on("mouseenter", function(){
$(this).addClass("beforeDP");
}).on("mouseleave", function(){
$(this).removeClass("beforeDP");
}).datepicker();
这样有意的不设置input的style,看到效果仍有效。
jQuery UI datepicker z-index默认为1 怎么处理的更多相关文章
- jQuery UI Datepicker使用介绍
本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...
- jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断
jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...
- JQuery UI datepicker 使用方法(转)
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...
- 页面日期选择控件--jquery ui datepicker 插件
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...
- 坑爹的jquery ui datepicker
1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天 期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...
- [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4
本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...
- 解决 jQuery UI datepicker z-index默认为1 的问题
最近碰到页面日期选择控件被页头挡住的问题,我们这个客户的电脑是宽屏的,上下窄,屏幕又小,导致他点击日期选择控件时,无法选择到月份.如图: 分析造成这个问题的原因: 我们页头部分的z-index设置为1 ...
- Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路
通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...
- jQuery UI Datepicker
http://www.runoob.com/try/try.php?filename=jqueryui-example-datepicker-dropdown-month-year <!doct ...
随机推荐
- battery-historian结果分析
准备电量数据: 1. 断开adb服务 执行:adb kill-server 2. 开启adb服务 执行:adb start-server或者adb devices这两步操作的作用:adb作为一种连接的 ...
- Silverlight 用DependencyProperty 自定义ImageButton控件 定义属性
为ImageButton自定义IconSource和Contents属性 xaml代码 <UserControl x:Class="SilverlightCreate.Silverli ...
- eureka的一点细节
第二部分粗略的过一遍,还是有些模糊,再来相对系统的看一下: ---------------------------------------------------------------------- ...
- 数据库的ACID跟事务隔离级别
摘抄:http://blog.csdn.net/shuaihj/article/details/14163713 ------------------------------------------- ...
- ubuntu14.04通过 gvm 安装 go语言开发环境
最近用回了ubuntu ,所以打算安装golang学习当下比较火热的这个语言 本来打算使用 sudo apt-get install golang的 安装后发现 是1.2.1不是最新版 所以上网上搜了 ...
- IPM的修炼之路
总结了一下最近一年半来看到的产品经理方面的素养资料. 产品经理: 必备素质:市场洞察,抽象概括,创新想象,心思细腻,热爱产品,具备一定的企业家精神等. 是通才:市场,项目,设计,管理,用户,统计,心理 ...
- mysql主从数据库错误处理
方法一:忽略错误后,继续同步 该方法适用于主从库数据相差不大,或者要求数据可以不完全统一的情况,数据要求不严格的情况 解决: stop slave; #表示跳过一步错误,后面的数字可变set glob ...
- DIV+CSS如何让图片和文字在同一行!
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
- 拿到返回值,Callable示例
- Android学习记录帖
1.OptionMenu的创建过程类图 2. OptionMenu的isActionBarMenu 在PhoneWindow的preparePanel中会根据设定的FEATURE来给变量isActio ...