Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
