jquery simple pop-up layer floating layer code
The jquery smart pop-up layer, where the position can be adapted, automatically moves to the left when the layer is displayed on the right. When the first run, please press F5 refresh, load remote jquery to see the effect, click the left mouse button, pop-up layer will appear in the rightmost click when the layer automatically move to the left.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <! 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>jquery pop-up layer floating layer code </title> <script src="/ajaxjs/jquery1.3.2.js "type=" text/ JavaScript "></script> <style> *{margin:0 padding:0} body{margin:0; padding:0; font-size:12px} ul,li{ List-style:none} ul{position:relative;top:-3px; left:-3px;border:1px solid #ccc; background: #fff;} li{height:23px; Line-height:23px;cursor:default; padding:0 0 0 10px} li.current{background: #eee} wrap{width:158px background: #eee; position:absolute;} </style> < Script type= "Text/javascript" > $ (Function () {$ (". Wrap"). Hide (); var objw=$ (". Wrap"). width (); var objh=$ (". Wrap"). Height (); $ (document). MouseDown (function (e) {var selfx=objw+e.pagex; var selfy=objh+e.pagey var bodyw= Document.documentElement.clientWidth+document.documentelement.scrollleft; var bodyh=document.documentelement.clientheight+document.documentelement.scrolltop; if (Selfx>bodyw && selfy>bodyh) {$ (". Wrap"). CSS ({top: (BODYH-OBJH), left: (BODYW-OBJW)}). Show (); }else if (SELFY>BODYH) {$ (". Wrap"). CSS ({top: (BODYH-OBJH), Left:e.pagex}). Show (); }else if (SELFX>BODYW) {$ (". Wrap"). CSS ({top:e.pagey,left: (BODYW-OBJW)}). Show (); }else{$ (". Wrap"). css ({Top:e.pagey,left:e.pagex}). Show (();}) $ ("Li"). Hover (function () {$ (this). addclass (' current ');},function () {$ (this) removeclass (' current ');}). Click (function () {Alert ($ (this). Text ()) $ (this). Parent (). Parent (). hide ();})} </script> </head> <body> <div style= "height:800px;width:900px" > </div> <div style= " position:absolute;top:300px;left:300px "><span style=" color: #f00 font-size:28px "> Please press F5 to refresh to see the effect, </ Span><br> Click the left mouse button, pop-up layer,<br> on the rightmost click layer automatically move to the left </div> <div class= "wrap" > <ul Onmousedown= "event.Cancelbubble = True "> <li> Lianjiang </li> <li> Ningde </li> <li> Fuzhou </li> <li> Xiamen </li > <li> Beijing </li> </ul> </div> </body> </html> |
The above is this article to share all the content, I hope you can enjoy.
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
