In the recent period of writing components, the page has an input box, click the Input box, pop up a country control or a city control. But the position of this control is always a headache. May be beginning without sinking heart to think, always feel that this is a technical problem, but also on the Internet and the group to many experts to consult, they give the answer is not what I want. Finally have to think about how to solve this problem, and now put some of their own thinking to write, one to prevent forgetting, and secondly also count a share.
Ideas:
Prerequisites: Only one input box object can be obtained.
1, Position value: absolute, relative and fixed three kinds. Relative is relative positioning, it is obviously not suitable, because in the actual operation, is not sure whether input has a parent node, and what the parent node is positioned, then relative positioning, the relative object is not known, so you can exclude relative. The second is fixed positioning, which is also not feasible. As a simple example, if the control is positioned to the position of (100,100), then if there is a scroll bar, the control will not follow the page scrolling, if still do not understand, think of the blog Park page back to the top of the function should understand.
2, after the above thinking, at least can be determined that the control of the position must be absolute, then its left value and top value how to calculate it? Be sure to start with the input box first.
3, because in the development of the jquery library, then the first thought is the $.offset () method, the View API know that offset is used to set or return the current matching element relative to the current document offset, that is, relative to the current document coordinates, is to get the absolute position of the current element. And the location is relative to the current document (page). In this case, the left of the control should be the left value of the current element, and the top of the control should be the top value of the current element plus the height of the current element itself. For verification, an example is immediately written:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <Scripttype= "Text/javascript"src= "Demo/jquery-1.9.1.js" ></Script> <styletype= "Text/css">. Layer{width:400px;Height:300px;background:Red;position:Absolute;} </style> </Head> <Bodystyle= "height:2000px;"> <inputtype= "text"ID= "INPUT1"placeholder= "Please select"style= "margin-top:100px;"onclick= "AddLayer ();"/> </Body></HTML><Scripttype= "Text/javascript"> functionAddLayer () {varPointer= $("#input1"). offset (); var$div= $("<div class= ' layer ' ></div>"); $div. css ({left:pointer.left, top:pointer.top+$("#input1"). Height ()}); $("Body"). Append ($div); }</Script>
It works well and does not change position with the change of scroll bar.
4, however, because my whole project is the angular control of the road, the left is the navigation, the right is the content area, found the exception, the control and input box separated, find a half day reason, also did not find, began to suspect that their own write control problems, or calculate the location of the idea is not correct? Tangled for a long while, did not find the cause of the problem, and finally have to use the universal elimination method.
5, how to exclude it? First on the Internet to find a Calendar control (My97 DatePicker), cited in, found that there is still the problem. Very happy, it seems that the control is not writing a problem, what is the reason? Keep looking.....
6, then various experiments, finally found the reason: the problem of the scroll bar, if not the body of the scroll bar or the IFRAME scroll bar, you will encounter this problem. In fact, it's easy to think about it, because offset is the relative offset according to the document, although the input box contains a scrollbar, but this scroll bar is not the document, so when scrolling, input will follow, The control is always left in the position relative to the document. In addition, input will follow because input is not positioned according to the document. That is, the position of my control is obtained based on the offset of input relative to document, but does not mean that the location of input is set at this offset.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title></title>6 <Scripttype= "Text/javascript"src= "Demo/jquery-1.9.1.js" ></Script>7 <styletype= "Text/css">8 . Layer{width:400px;Height:300px;background:Red;position:Absolute;}9 . Wrap{Height:500px;Overflow:Auto;}Ten . Inner{Height:1000px;} One </style> A </Head> - <Bodystyle= "height:2000px;"> - <Divclass= "Wrap"> the <Divclass= "inner"> - <inputtype= "text"ID= "INPUT1"placeholder= "Please select"style= "margin-top:100px;"onclick= "AddLayer ();"/> - </Div> - </Div> + </Body> - </HTML> + <Scripttype= "Text/javascript"> A functionAddLayer () { at varPointer= $("#input1"). offset (); - var$div= $("<div class= ' layer ' ></div>"); - $div. css ({left:pointer.left, top:pointer.top+$("#input1"). Height ()}); - $("Body"). Append ($div); - } - </Script>
7, it seems that the problem is really no solution, there is no way to do it? Do not forget, then think .....
8, accidentally, and found jquery position () method, then use this method to try, the idea is to first use the position () method to get input relative to the parent element offset, and then set the location of the control. In addition, recursively finds the parent element of the first position in all the parent elements of input, relative the control append up. Experiments show that if the parent of input is directly relative, there is no problem, but if all of the parent nodes of input are not, the body is finally found. The result is the same as above.
The final conclusion: the initial method should be the correct method. So sometimes there is no need to think about the problem is too complicated, or into the dead alley out.
How do I calculate the position of the popup control?
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
