您的位置：首页 > Web前端 > JavaScript

用javascript获取控件实际位置，点击控件紧邻显示浮动 DIV

2012-03-06 14:10 543 查看
代码取自JS日历，提取出来方便使用。欢迎回贴提供改进、更通用的代码:

(注：粘贴即用，兼容 IE7，IE8，IE9的兼容模式,但不兼容IE9。如果想兼容，需在<head>添加<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />）

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!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 runat="server">

<title></title>

<style type="text/css">

.dv

{

width:200px;

height:100px;

background-color:Yellow;

border:1px black solid;

position:absolute;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<table style="width:100%;">

<tr>

<td>

<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="return show(this);"

/>

</td>

<td>

 </td>

<td>

 </td>

</tr>

<tr>

<td>

 </td>

<td>

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return show(this);" />

</td>

<td>

 </td>

</tr>

<tr>

<td>

 </td>

<td>

 </td>

<td>

 </td>

</tr>

</table>

<div id="ddv" class="dv">

</div>

<script>

function show(obj) {

var ddv = document.getElementById("ddv");

var fixedX = -1; // x position (-1 if to appear below control)

var fixedY = -1; // x position (-1 if to appear below control)

var leftpos = 0;

var toppos = 0;

var aTag = obj;

do {

aTag = aTag.offsetParent;

leftpos += aTag.offsetLeft;

toppos += aTag.offsetTop;

} while (aTag.tagName != "BODY");

ddv.style.left = fixedX == -1 ? obj.offsetLeft + leftpos : fixedX;

ddv.style.top = (fixedY == -1 ? obj.offsetTop + toppos : fixedY)+20;

return false;

}

</script>

</div>

</form>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航