<!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>弹出浮层测试</title>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script language="javascript">
//+--------------------------------------------
//需要jquery-1.4.4.min.js 以上版本，并 jQuery.noConflict();
//+--------------------------------------------
//页面上相对某个点击事件定位通用函数
function absoluteLocate(e,x,y,divID) {
if(!e) {
e = window.event;
}
var bodyScrollTop = (document.compatMode == "CSS1Compat") ? document.documentElement.scrollTop : document.body.scrollTop;
var bodyScrollLeft = (document.compatMode == "CSS1Compat") ? document.documentElement.scrollLeft : document.body.scrollLeft;
var posx = 0;
var posy = 0;
//FF特有
if (e.pageX || e.pageY)
{
posx = e.pageX + x;
posy = e.pageY + y;
}
//clientX 通用属性
else
{
posx = e.clientX + bodyScrollLeft + x;
posy = e.clientY + bodyScrollTop + y;
}
jQuery("#"+divID).css("left",posx+"px").css("top",posy+"px");
jQuery("#"+divID).toggle();
}
</script>
<style>
.myTestDiv{
position:absolute;
left:0px;
top:0px;
z-index:9999999;
width:470px;
height:auto;
border:#555555 2px solid;
background-color:#FFFFFF;
padding-bottom:6px;
display:none;
}
.myTestDiv .myTestDivTitle{
position:absolute;
right:2px;
top:2px;
filter:alpha(opacity=80);
opacity:0.8;
}
</style>
</head>
<body>
<div>
<input type='button' name='showDiv' value='显示浮层' onclick="absoluteLocate(event,10,20,'myTestDiv')"/>
</div>
<div id='haha'>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
okokokokokokokokokokokokokokokokokokok<br/>
</div>
<!--网站质量分类历史浮层-->
<div id="myTestDiv" class="myTestDiv">
<div class="myTestDivTitle">
<a href="javascript:void(0);" onClick="jQuery('#myTestDiv').hide();return false;">关闭</a>
</div>
<iframe id="myTestIfr" name="myTestIfr" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" src="http://www.baidu.com"></iframe>
</div>
</body>
</html>
