Home > Developer > JavaScript

Javascript text link prompt box

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The following functions must be implemented:
(1) move the mouse over the link text in the article. A prompt box is displayed at the corresponding position. The style of the prompt box is controlled by css and the height is adaptive. You can click the link in the prompt box, the dialog box disappears automatically when it is moved to the prompt box;
(2) Place the prompt box within the text field range. If the link text is on the left side of the text field, the prompt box will be displayed on the right so that it will not leave the text field. Otherwise, if the link text is on the right side of the text field, the prompt box is displayed on the left;
(3) If there are many text fields and the link text happens to be at the bottom of the browser, in order to make the prompt box out of the visible range of the browser, the position of the prompt box should be automatically adjusted to the link text;

1. cssCopy codeThe Code is as follows :. main {width: 950px; border: #9C3 1px solid; margin: 0 auto; padding: 15px; background-color: # fff; line-height: 25px; font-size: 14px; position: relative ;}
Span {border: #70bce4 2px solid; display: block; position: absolute; background-color: # FFF; padding: 5px 10px; font-size: 12px; width: 200px; display: none ;}
. Cur {color: #900 ;}

2. jsCopy codeThe Code is as follows: // gets the function of an object element;
Function $ a (id, tag) {var re = (id & typeof id! = "String ")? Id: document. getElementById (id); if (! Tag) {return re;} else {return re. getElementsByTagName (tag );}}
Function tips (){
// Obtain the list of a elements in the text field;
Var article = $ a ("article", "")
For (I = 0; I <article. length; I ++ ){
// Traverses Element a. Element a without the "cur" class will not execute the subsequent code;
If (article [I]. className. indexOf ("cur") =-1) continue;
Article [I]. onmouseover = function (e ){
// Obtain the coordinates of the mouse pointer in the visible area of the browser, which is not affected by the document content;
Var e = e | event;
PosX = e. clientX;
PosY = e. clientY;
// Obtain the height of the visible area of the browser;
Var bodyhew.document.doc umentElement. clientHeight;
Var parwidth = $ a ("article"). offsetWidth;
Var tipbox = get_nextSibling (this );
Var boxlist = $ a ("article", "span ")
// Set the span prompt boxes in the text area to hidden;
For (j = 0; j <boxlist. length; j ++ ){
Boxlist [j]. style. display = "none ";
Boxlist [j]. innerHTML = "transfer to background data"
}
// Set the display of the current prompt box;
Tipbox. style. display = "block ";
Var w = tipbox. offsetWidth-this.offsetWidth;
/*
The div with the id as article adds the relative position: relative, so it is already the parent level of the prompt box;
Controls the display position of the pop-up box;
*/
Tipbox. style. left = (this. offsetLeft> parwidth/2? This. offsetLeft-w: this. offsetLeft) + "px ";
Tipbox. style. top = (posY + tipbox. offsetHeight> bodyhe? This. offsetTop-tipbox.offsetHeight: document. all? This. offsetTop + 15: this. offsetTop + this. offsetHeight) + "px ";
Tipbox. onmouseover = function () {this. style. display = "block ";}
Tipbox. onmouseout = this. onmouseout = function () {tipbox. style. display = "none ";}
}
}
}
// Obtain the next tag node of an object element;
Function get_nextSibling (n ){
Var x = n. nextSibling;
While (x. nodeType! = 1 ){
X = x. nextSibling;
}
Return x;
}

If you are interested in the source file code, you can test it. If you have any questions, leave a message @&@Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> prompt box effect </title>
<Style type = "text/css">
. Main {width: 950px; border: #9C3 1px solid; margin: 0 auto; padding: 15px; background-color: # fff; line-height: 25px; font-size: 14px; position: relative ;}
Span {border: #70bce4 2px solid; display: block; position: absolute; background-color: # FFF; padding: 5px 10px; font-size: 12px; width: 200px; display: none ;}
. Cur {color: #900 ;}
</Style>
</Head>
<Body onload = "tips ();">
<Br/>
<Br/>
<Br/>
<Br/>
<Div class = "main" id = "article">
As early as the outbreak of Edison Chen's "yanzhaomen" incident, Edison Chen's father was once included in the family of Mainland male Hu Bing. The so-called wind and waves, the two were shot by the media for dinner and shopping. <A href = "#" class = "cur"> Hu Bing </a> <span> <a href = "#"> Shanghai dual-fire gun </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> </span> myself the ambiguous attitude also adds a fog to this incident. As early as the outbreak of Edison Chen's "yanzhaomen" incident, Edison Chen's father was once included in the family of Mainland male Hu Bing. The so-called wind and waves, the two were shot by the media for dinner and shopping. <A href = "#" class = "cur"> Hu Bing </a> <span> <a href = "#"> Shanghai dual-fire gun </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> </span> myself the ambiguous attitude also adds a fog to this incident. As early as the outbreak of Edison Chen's "yanzhaomen" incident, Edison Chen's father was once included in the family of Mainland male Hu Bing. The so-called wind and waves, the two were shot by the media for dinner and shopping. <A href = "#" class = "cur"> Hu Bing </a> <span> <a href = "#"> Shanghai dual-fire gun </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> <br/> <a href = "#"> trigger a trigger in Shanghai </a> </span> myself the ambiguous attitude also adds a fog to this incident.
</Div>
<Script type = "text/javascript">
Function $ a (id, tag) {var re = (id & typeof id! = "String ")? Id: document. getElementById (id); if (! Tag) {return re;} else {return re. getElementsByTagName (tag );}}
Function tips (){
Var article = $ a ("article", "")
For (I = 0; I <article. length; I ++ ){
If (article [I]. className. indexOf ("cur") =-1) continue;
Article [I]. onmouseover = function (e ){
Var e = e | event;
PosX = e. clientX;
PosY = e. clientY;
Var bodyhew.document.doc umentElement. clientHeight;
Var parwidth = $ a ("article"). offsetWidth;
Var tipbox = get_nextSibling (this );
Var boxlist = $ a ("article", "span ")
For (j = 0; j <boxlist. length; j ++ ){
Boxlist [j]. style. display = "none ";
Boxlist [j]. innerHTML = "transfer to background data"
}
Tipbox. style. display = "block ";
Var w = tipbox. offsetWidth-this.offsetWidth;
Tipbox. style. left = (this. offsetLeft> parwidth/2? This. offsetLeft-w: this. offsetLeft) + "px ";
Tipbox. style. top = (posY + tipbox. offsetHeight> bodyhe? This. offsetTop-tipbox.offsetHeight: document. all? This. offsetTop + 15: this. offsetTop + this. offsetHeight) + "px ";
Tipbox. onmouseover = function () {this. style. display = "block ";}
Tipbox. onmouseout = this. onmouseout = function () {tipbox. style. display = "none ";}
}
}
}
Function get_nextSibling (n ){
Var x = n. nextSibling;
While (x. nodeType! = 1 ){
X = x. nextSibling;
}
Return x;
}
</Script>
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
boxee box d link wordpress text box plugin input text box html html create text box html tag text box dreamweaver text box wordpress text box
Related Article
JavaScript solution to the eight Queens Problem method summar...
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
The html space symbol nbsp; ensp; emsp; introduces and implem...
Ajax and 302 response code Testing
Ajax and 302 response code test_javascript-js tutorial

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More