<!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=gb2312" />
<title>无标题文档</title>
</head><body>
<table>
<tr>
<td><input type="button" value="点击我显示div1的内容" /></td>
<td>a</td>
<td>b</td>
<td><input type="button" value="点击我显示div2的内容" /></td>
</tr>
</table></body>
</html>
我是想弹出一个div层,还能指定层的位置,层里有 <table>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<table>
<tr>
<td><input type="button" value="点击我显示div1的内容" /></td>
<td>a</td>
<td>b</td>
<td><input type="button" value="点击我显示div2的内容" /></td>
</tr>
</table></body>
</html>
我是想弹出一个div层,还能指定层的位置,层里有 <table>
那么你要的位置document.getElementById("test").style.left = xx+"px";
document.getElementById("test").style.marginLeft = xx+"px";top的控制是一样的,当点击的时候显示就可以了,楼主应该理解了吧,已经很明确了
table,tr,td{border:1px solid #ccc; border-collapse:collapse;}
table.parent{width:500px; position:relative;}
td{height:22px;line-height:22px;}
#div1,#div2{width:300px;height:200px;display:none;background:#c0c0c0;border:5px solid #f7f7f7; position:absolute;}
#div1{left:20px; top:10px;}/*1位置*/
#div2{left:50px; top:50px;}/*2位置*/
td div table{width:300px;}
function ctrlDIV(id) {
var div = document.getElementById(id);
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block"
}
}
<table class="parent">
<tr>
<td><input type="button" value="点击我显示div1的内容" onclick="ctrlDIV('div1')" /></td>
<td><div id="div1" onclick="ctrlDIV('div1')"><table><tr><td>点击关闭</td></tr></table></div></td>
<td><div id="div2" onclick="ctrlDIV('div2')"><table><tr><td>点击关闭</td></tr></table></div></td>
<td><input type="button" value="点击我显示div2的内容" onclick="ctrlDIV('div2')" /></td>
</tr>
</table>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function show(id,l,t){
var div=document.getElementById(id);
div.style.width="50px";
div.style.height="50px";
div.style.border="1px solid black";
div.style.position="absolute";
div.style.display="block";
div.style.left=parseInt(0|document.getElementById(l).value)+"px";
div.style.top =parseInt(0|document.getElementById(t).value)+"px";
}
</script>
</head><body>
<table>
<tr>
<td><input type="button" value="点击我显示div1的内容" onclick="show('div1', 'l1', 't1');"/><br>left:<input id="l1" /><br>top :<input id="t1" /></td>
<td>a</td>
<td>b</td>
<td><input type="button" value="点击我显示div2的内容" onclick="show('div2', 'l2', 't2');" /><br>left:<input id="l2" /><br>top :<input id="t2" /></td>
</tr>
</table>
<div id="div1" style="display:none;">div1</div><div id="div2" style="display:none;">div2</div>
</body>
</html>