需求:点击一个按钮之后在按钮下方显示一个浮出层。
<style type="text/css">
#thelayer{
width:300px;height:98px;border:#E4F5FD 1px solid;z-index:2;position:absolute;background:#FFFFFF;display:none;
}
</style>
<script>
function CPos(x, y)
{
this.x = x;
this.y = y;
}
function GetObjPos(ATarget)
{
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
while (target)
{
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent
}
return pos;
}
function showlayer(obj) {
pos = GetObjPos(obj);
l = document.getElementById("thelayer");
l.style.left = pos.x + 40;
l.style.top = pos.y + 40;
l.style.display="block";
}
</script>
<div οnclick="showlayer(this)">点我</div>
<div id="thelayer">浮我</div>