最近在维护一个后台系统的时候遇到这样的一个坑：后台系统中日期控件使用的是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 怎么处理的更多相关文章

  1. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  2. jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断

    jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...

  3. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  4. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  5. 坑爹的jquery ui datepicker

    1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天 期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...

  6. [转]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 ...

  7. 解决 jQuery UI datepicker z-index默认为1 的问题

    最近碰到页面日期选择控件被页头挡住的问题,我们这个客户的电脑是宽屏的,上下窄,屏幕又小,导致他点击日期选择控件时,无法选择到月份.如图: 分析造成这个问题的原因: 我们页头部分的z-index设置为1 ...

  8. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  9. jQuery UI Datepicker

    http://www.runoob.com/try/try.php?filename=jqueryui-example-datepicker-dropdown-month-year <!doct ...

随机推荐

  1. 对四次挥手中的TIME_WAIT状态的学习

    TIME_WAIT状态不必多说    是属于四次挥手中的一种特殊状态 作用有两点简单明了  不废话 (1)可靠的实现TCP全双工连接的终止 (2)允许老的重复的.迟到的分节在网络中消逝        ...

  2. goodBye wordPress

    2016-07-28,我自己在GoDaddy上面注册了一个自己的域名,www.codetree.tech,同时在老薛主机上面购买了一个主机域名.我搭建了一个属于自己的博客,开心了很久.最近收到了域名续 ...

  3. java替换word

    package demo; import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOExcept ...

  4. (转)linux passwd批量修改用户密码

    linux passwd批量修改用户密码  原文:http://blog.csdn.net/xuwuhao/article/details/46618913 对系统定期修改密码是一个很重要的安全常识, ...

  5. Ubuntu 16.04下安装Charles抓包工具

    Charles是一个跨平台的抓包工具,虽然没有Fiddler做的这么完美,但是也算是另一个选择. 下载: https://www.charlesproxy.com/download/ 注册: http ...

  6. nginx+keepalived主辅切换（监控脚本在keepalived.conf中执行）

    以前写过一篇,nginx+keepalived 双机互备的文章,写那篇文章的时候没有想过如果apache或者nginx 挂了,而 keepalived 或者 机器没有死,那么主辅是不会切换的,今天就研 ...

  7. C++ stl vector介绍

    转自: STL vector用法介绍 介绍 这篇文章的目的是为了介绍std::vector,如何恰当地使用它们的成员函数等操作.本文中还讨论了条件函数和函数指针在迭代算法中使用,如在remove_if ...

  8. Java中的阻塞队列-ConcurrentLinkedQueue

    http://ifeve.com/concurrentlinkedqueue/ 1.    引言 在并发编程中我们有时候需要使用线程安全的队列.如果我们要实现一个线程安全的队列有两种实现方式一种是使用 ...

  9. intellijidea课程 intellijidea神器使用技巧 5-2 localhistory

    Ctrl shift A  ==>localhistory ==> show history 查看文件本地历史记录(idea每次修改在本地会生成历史记录) Ctrl shift A  == ...

  10. 零基础逆向工程39_Win32_13_进程创建_句柄表_挂起方式创建进程

    1 进程的创建过程 打开系统 --> 双击要运行的程序 --> EXE开始执行 步骤一: 当系统启动后,创建一个进程:Explorer.exe(也就是桌面进程) 步骤二: 当用户双击某一个 ...