<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery Popup 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>
<body>
<div style= "height:800px;width:900px" > </div>
<div style= "position:absolute;top:300px;left:300px" ><span style= "color: #f00; font-size:28px" > Press F5 to refresh, To see the effect,</span><br> click the left mouse button, pop-up layer,<br> on the right click
Layer automatically moves 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>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
jquery Smart pop-up layer, automatically determine location
