<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="a.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
function addRow(e)
{
//获取对象相对位置
var p = new Object()
p.x = e.offsetLeft
p.y = e.offsetTop
while (e = e.offsetParent)
{
p.x += e.offsetLeft
p.y += e.offsetTop
}
//调整div弹出位置
var divs = document.getElementById("qq");
divs.className="divcss";
divs.id="newDiv";
divs.style.top=p.y;
divs.style.marginLeft=p.x - 315 ;
divs.style.marginTop=0;
document.body.appendChild(divs);
}
//点击复选框时出发
function allselected(obj){
var c=document.getElementsByName("cb");
for(var i=0;i<c.length;i++){
c[i].checked=obj.checked;
}
}
//点击复选框后超级连接时出发
function select(){
var a=document.getElementsByName("all");
if(a[0].checked)
a[0].checked="";
else
a[0].checked="true";
allselected(a[0]);
}
</script>
<input type="text" name="ttt" value="" size="30"/>
<input type="button" value="隐藏" οnclick="newDiv.style.display='none';">
<input type="button" value="显示" οnclick="newDiv.style.display='block';">
<input type="button" value="x坐标" οnclick="addRow(this)">
<br>
<input type="text" value="aaaaaaaaaaaaaaaaaaaaa" size="50"/>
<div id="qq"
style="position:absolute;background-color:#fffffe;width: 350px; height: 160px;border-width: 1px; border-color: #bed0eb; border-style: solid;font-Size: 12px;">
<div style="width: 100%; height: 18; background-color: #aabbcc; margin: 0px; text-align: right;font-Size:14px;">
<a href="#" οnclick="newDiv.style.display='none';">关闭</a>
</div>
<div style="background-color:#fffffe;margin: 0px; padding: 1px; font-Size: 12px; text-align: right;">
<input align="right" type="checkbox" name="all" οnclick="allselected(this)"/>
<a href="#" οnclick="select();">全部</a>
</div>
<div id="qq1"
style="background-color:#fffffe;font-Size: 12px; width: 325px; height: 90px; margin: 0px; padding: 1px; margin-left: 10px; margin-top: 2px; cursor: pointer; overflow: auto; background-position: 200px 50px;">
<table width="100%">
<tr>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">中国</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">美国</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">英国</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">法国</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">日本</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">韩国</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">朝鲜</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">俄罗斯</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">中国</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">朝鲜</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">俄罗斯</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">中国</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">朝鲜</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">俄罗斯</label>
</td>
<td>
<input type="checkbox" name="cb" />
<label style="font-size: 12px;">中国</label>
</td>
</tr>
</table>
</div>
<div style="text-align:right; margin-top:5px; margin-bottom: 5px;">
<input type="button" value="确定"/>
</div>
</div>
------------------------------------------------------------------------------------------------------------------------------------------------------------
</body>
</html>