JQuery UI datepicker z-index default to 1 how to handle

Source: Internet
Author: User
Tags jquery ui datepicker

Recently, when maintaining a back-end system, I encountered a pit: the date control in the background system uses the jquery UI DatePicker.

This control generates a Z-index = 1 for the date selection box. Here's the problem. There are many z-index on the page that are larger than 1 tags. I searched the internet and found that a lot of people have encountered the same problem. There are basically two ways of solving the problem.

Below I combine demo, look together.

We first follow the jquery UI datepicker API documentation (address I don't write, should be able to search) write a basic demo,body code as follows:

1 <Body>2  3 <P>Date:<inputtype= "text"ID= "DatePicker"style= "position:relative;"></P>4 <Divstyle= "position:relative; width:200px; height:300px;">5   <Pstyle= "position:absolute; z-index:10;top:2px;left:50px;">Ha ha! Can't Stop me!!</P>6   7 </Div>8    <Script>9   $(function() {Ten $( "#datepicker"). DatePicker ({}); One   }); A   </Script> -   - </Body>

The effect is as follows:

You see? Our date control does not block the <p> haha in the page! Can't Stop me!! </p>

Opening the debugger we found that the z-index of <p> was 10, while the z-index of the date control was only 1.

And after I manually modify the control pop-up, it is only then valid, click on the space (close the control), again trigger the control display, the control Z-index is 1.

There are two ways to do this online:

Method 1: Delay Modify Style

DatePicker has a callback function--beforeshow:function (input) {}, and parameter input is the input that triggers the date control. Unfortunately, you cannot get the generated control form. However, the control has a id= "Ui-datepicker-div" (the control comes with the default). We use this ID in this callback to delay processing:

1 $ ("#datepicker" ). DatePicker ({2       function3         SetTimeout (function4           $ (' #ui-datepicker-div '). CSS ("Z-index",  5         },6      7     });

Effect:

It seems that Method 1 is valid, but when there are multiple instances on the page, is it reliable to use the ID? Let's take a look at Method 2

Method 2: Why is Z-index equal to 1?

Analyze the source code of the DatePicker, the Z-index value of the pop-up date selection box is: $ (input). ZIndex () + 1. Continue parsing the $.zindex () function (in the Jquery-ui.js file) and discover that when input's CSS position value is absolute, fixed, or relative, the value returned by the $.zindex () function is the input CSS The Z-index value.

For example: <input type= "text" name= "add_date" id= "Add_date" style= "z-index:10;position:relative;" value= ""/> This setting, The Z-index value of the Jquery-ui DatePicker date selection box that pops up is set to 11.

The code is as follows: Set the z-index of input

1 < P > Date:<type= "text"  ID= "DatePicker"  style  = "POSITION:RELATIVE;Z-INDEX:20;" ></ P >
1 $ ("#datepicker"). DatePicker ({});

Look at the effect:

Method 2 is valid, but Method 2 also has a problem, if there is another date control, its z-index is 11 (10+1) of the shell may not block this input.

Of course we can change the z-index increment at the time of input MouseEnter, the mouseleave time is decreasing.

1 function () {2       $ (this). AddClass ("BEFOREDP"); 3     function () {4       $ (this). Removeclass ("BEFOREDP"); 5     }). DatePicker ();

This intentionally does not set the input style, see the effect is still valid.

JQuery UI datepicker z-index default to 1 how to handle

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.