1、区域内的定位,滚动时,弹出框不随定位值而定。
2、body内的定位,滚动时,弹出框定。期望用区域实现body的这种弹出框固定在定位值的地方。
<!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" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>关于区域滚动与元素定位问题</title>
<style>
body{overflow: auto;}
table{width:100%;border-collapse:collapse;}
td{border:1px solid #D4D4D4;}
.top{height:50px;}
.left{width:100%;}
.right{height:200px;overflow: auto;}
.color{cursor:pointer;color:red;}
.alert{display:none;border:1px solid #D4D4D4;background-color:yellow;}
</style>
<script>
function open_div(nums)
{
$("#alert_div_id_"+nums).css('display','block');
var obj = $("#open_div_id_"+nums);
var x = obj.offset().left;
var y = obj.offset().top + obj.height();
var o_message = document.getElementById("alert_div_id_"+nums);
o_message.style.left = x + "px";
o_message.style.top = y + "px";
o_message.style.position='absolute';
o_message.style.display='block';
o_message.style.zIndex=99999;
$("#alert_div_id_"+nums).html("我是弹出的DIV_"+nums+"<br/>我是弹出的DIV_"+nums+"<br/>");
}
</script>
</head>
<body>
<div style="background-color:#FDF5E6;">
<table>
<tr>
<td colspan="2"><div class="top">标题栏</div></td>
</tr>
<tr>
<td style="width:200px;"><div class="left">导航</div></td>
<td>
<div class="right">
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="open_div_id_1" onclick="open_div(1);" class="color">单击此处弹出DIV_1</div>
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="alert_div_id_1" class="alert"></div>
</div>
</td>
</tr>
</table>
</div>
<div> </div>
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="open_div_id_2" onclick="open_div(2);" class="color">单击此处弹出DIV_2</div>
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="alert_div_id_2" class="alert"></div>
</body>
</html>
2、body内的定位,滚动时,弹出框定。期望用区域实现body的这种弹出框固定在定位值的地方。
<!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" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>关于区域滚动与元素定位问题</title>
<style>
body{overflow: auto;}
table{width:100%;border-collapse:collapse;}
td{border:1px solid #D4D4D4;}
.top{height:50px;}
.left{width:100%;}
.right{height:200px;overflow: auto;}
.color{cursor:pointer;color:red;}
.alert{display:none;border:1px solid #D4D4D4;background-color:yellow;}
</style>
<script>
function open_div(nums)
{
$("#alert_div_id_"+nums).css('display','block');
var obj = $("#open_div_id_"+nums);
var x = obj.offset().left;
var y = obj.offset().top + obj.height();
var o_message = document.getElementById("alert_div_id_"+nums);
o_message.style.left = x + "px";
o_message.style.top = y + "px";
o_message.style.position='absolute';
o_message.style.display='block';
o_message.style.zIndex=99999;
$("#alert_div_id_"+nums).html("我是弹出的DIV_"+nums+"<br/>我是弹出的DIV_"+nums+"<br/>");
}
</script>
</head>
<body>
<div style="background-color:#FDF5E6;">
<table>
<tr>
<td colspan="2"><div class="top">标题栏</div></td>
</tr>
<tr>
<td style="width:200px;"><div class="left">导航</div></td>
<td>
<div class="right">
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="open_div_id_1" onclick="open_div(1);" class="color">单击此处弹出DIV_1</div>
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="alert_div_id_1" class="alert"></div>
</div>
</td>
</tr>
</table>
</div>
<div> </div>
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="open_div_id_2" onclick="open_div(2);" class="color">单击此处弹出DIV_2</div>
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/></div>
<div id="alert_div_id_2" class="alert"></div>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货