Home > Developer > JavaScript
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <title> Tips, text tip with triangle closure </title> </pead> <body> <style type = "text/css"> body {font-size: 12px ;}. lj-tipsWrap ,. lj-in ,. lj-close {display: inline-block ;}. lj-tipsWrap {Background: # F4FBFF; line-height: 1.5em; padding: 5px 15px; border: 1px solid #2192D3; position: absolute; text-align: left ;}. lj-in {position: absolute; zoom: 1; border: 10px dashed transparent; width: 0px; height: 0px ;}. lj-in span {zoom: 1; width: 0px; height: 0px; overflow: hidden ;}. lj-close {position: absolute; text-decoration: none; color: #000; font-size: 14px; height: 9px; width: 9px; overflow: hidden; line-height: 0.5em; right: 0; top: 0 ;}. lj-close: hover {color: # 39F ;}. lj-top {border-top: 10px solid #2192D3; bottom:-20px; left: 3px ;}. lj-top span {border-top: 10px solid # F4FBFF; margin:-11px 0 0-10px ;}. lj-right {border-right: 10px solid #2192D3; left:-20px; top: 3px ;}. lj-right span {border-right: 10px solid # F4FBFF; margin:-10px 0 0-9px ;}. lj-bottom {border-bottom: 10px solid #2192D3; top:-20px; left: 3px ;}. lj-bottom span {border-botto M: 10px solid # F4FBFF; margin:-9px 0 0-10px ;}. lj-left {border-left: 10px solid #2192D3; right:-20px; top: 3px ;}. lj-left span {border-left: 10px solid # F4FBFF; margin:-10px 0 0-11px ;}. lj-left ~. Lj-close {left: 0;}/* css 3 progressive enhancement */. lj-tipsWrap {-webkit-border-radius: 3px;-moz-border-radius: 3px;-webkit-box-shadow: 2px 2px 3px # eee; -moz-box-shadow: 2px 2px 3px # eee ;} </style> show me a DIV <br> <input style = "display: inline-block; padding: 5px; border: 1px solid # CCC; margin: 30px 30px 30px 100px; "value =" click my "id =" test2 "> <br> the prompt appears below me <br> the prompt appears on the left <br> the prompt will automatically disappear after 2 seconds <br> A button is displayed. <br> you may need to zoom in or out different pages. The location of the meeting will be offset. <br> advantages <ul> <li> 1: compatible with various browsers </li> <li> 2. Customize the TIPS style (color ), CSS3 progressive enhancement </li> <li> 3: prompt displayed in multiple directions </li> <li> 4: pure CSS + javascript (excluding any image) </li> <li> 5: Super small CSS + js = 3 k </li> </ul> parameter configuration <ul> <li> ljtips (object ). show (JSON) </li> <li> object: DOM object ID (test1), DOM object </li> <pre> json: {content: prompt message content (required), p: prompt box position (optional value: top left bottom right), default value: right (optional), closeBtn: whether the button is closed (true false) default Value (false) (optional), time: How many milliseconds the prompt box disappears (optional)} </Pre> </li> </ul> usage instructions <ul> <li>. show ();. hide ();. clear (); Generally, you only need to use show, hide; </li> <li> use 1 </li> <li> first instantiate an ljtips (var tips = ljtips ('test1'), and then use tips. show (JSON) </li> <li> use 2 </li> <li> In-row call prompt box "<div onclick =" ljtips (this ). show (JSON); "> </div>" </li> <li> Use 3 </li> <li> call document in JS. getElementById ("test6 "). onmouseover = function () {ljtips (this ). show ({content: "You cannot close this box! No close button! ", P: 'right'}) };</li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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
