<!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>
<style type="text/css">
body{font:12px; padding:0; margin:0;}
#bigdiv{1000px; margin:0 auto;}
.smalldiv{auto; height:100px; background:#066;}
.infoa{color:#fff;}
.infodiv{color:#fff; 200px; position:absolute; height:150px; background:gray; display:none;}
</style>
</head>
<body>
<div id="bigdiv">
<div class="smalldiv">
<a href="#" class="infoa">个人信息AAA</a>
</div>
<div class="smalldiv">
<a href="#" class="infoa">个人信息BBB</a>
</div>
<div class="smalldiv">
<a href="#" class="infoa">个人信息CCC</a>
</div>
<div class="smalldiv">
<a href="#" class="infoa">个人信息DDD</a>
</div>
<div class="infodiv" id="infoDiv">弹出框</div>
</div>
</body>
</html>
<script>
var oInfoDiv = document.getElementById("infoDiv");
var oInfoa = document.getElementsByClassName("infoa");
for( var i = 0 ; i < oInfoa.length ; i++ ){
oInfoa[i].onclick = function(e){
var e = e || event;
e.stopPropagation ? e.stopPropagation() : e.cancelBuble = true;
oInfoDiv.style.display = "block";
oInfoDiv.style.left = e.pageX +"px";
oInfoDiv.style.top = e.pageY +"px";
}
}
document.onclick = function(){
oInfoDiv.style.display = "none";
}
</script>