悬浮div问题

我的页面基本上是这样的
<table>
<tr><td>11111</td></tr>
<tr><td>1111111111</td></tr>
<tr><td>122222222</td></tr>
<<tr><td><input type="button" name="bu" value="显示div"></td></tr>
</table>我点击按钮“显示div”的时候，想实现这样的效果：
1）让这个div始终在这个table页面的上面，就是所谓的悬浮吧，我现在已经能实现悬浮了，但没办法居中到窗口中间
2）鼠标只能在这个div中，不能移出这个div，除非自己关闭这个div，请问怎么实现哦？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

第一个功能，参考：http://blog.csdn.net/sohighthesky/archive/2009/11/01/4754184.aspx
调用那个js方法就行了
第二个功能 js不可能实现
<!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>
<link rel="stylesheet" type="text/css" href="abc.css" />
<script>
function $(str)
{
return (document.getElementById(str));
}
function openBg(state)//打开遮照
{
if(state == 1)
{
$("bg").style.display = "block";
var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
$("bg").style.height = h + "px";
$("selectItem").style.display = "block";
$("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";
$("selectItem").style.top = document.body.scrollTop + 100 + "px";
if(document.all.SelectName.value=="0")
{
document.getElementById("c00").style.display="block";
document.getElementById("c01").style.display="none";
document.getElementById("c02").style.display="none";
document.getElementById("c03").style.display="none";
}
if(document.all.SelectName.value=="1")
{
document.getElementById("c00").style.display="none";
document.getElementById("c01").style.display="block";
document.getElementById("c02").style.display="none";
document.getElementById("c03").style.display="none";
}
if(document.all.SelectName.value=="2")
{
document.getElementById("c00").style.display="none";
document.getElementById("c01").style.display="none";
document.getElementById("c02").style.display="block";
document.getElementById("c03").style.display="none";
}
if(document.all.SelectName.value=="3")
{
document.getElementById("c00").style.display="none";
document.getElementById("c01").style.display="none";
document.getElementById("c02").style.display="none";
document.getElementById("c03").style.display="block";
}
}
else
{
$("bg").style.display = "none";
$("selectItem").style.display = "none";
}
}
function closeBg()//点击取消关闭遮照
{
$("bg").style.display = "none";
$("selectItem").style.display = "none";
}
function tableClicked(e)
{
var key;
var ab  = true;
var a = document.getElementsByName("ck01");
for(var i = 0; i < a.length; i++)
{
if(a[i].checked == ab)
{
document.getElementById("ms").value =a[i].value;
}
}
$("bg").style.display = "none";
$("selectItem").style.display = "none";
}
</script>
</head>
<body onload="document.forms[0].reset()">
<form id="forms">
<div id="main">
<input name="button" type="button" class="bton pointer" value="请选择"
onclick="openBg(1);" />
<div id="result">
<div class="tit bgc_eee">
<h2>
您已选择的城市
<br>
<input id="ms" type="text"/>
</h2>
</div>
<div class="cont" id="makeSureItem">
</div>
</div>
</div> <div id="bg">
</div>
<div id="selectItem" class="hidden">
<div class="tit bgc_ccc move">
<h2 class="left">
请选择城市
</h2>
<span class="pointer right" onclick="closeBg();">[取消]</span>
</div>
<div class="cls"></div>
<div class="cont">
<div id="selectSub">

<select name="SelectName" onchange="openBg(1)"
style="margin-bottom: 10px;">
<option value="0">
北京
</option>
<option value="1">
上海
</option>
<option value="2">
江苏
</option>
<option value="3">
浙江
</option>
</select>
<div id="c00">

<input type="radio" name="ck01" onclick="tableClicked(event)"
value="北京" />
北京
<input type="radio" name="ck01" onclick="tableClicked(event)"
value="福建" />
福建
<input type="radio" name="ck01" onclick="tableClicked(event)"
value="四川" />
四川
<input type="radio" name="ck01" onclick="tableClicked(event)"
value="江苏" />
江苏
</div>
<div id="c01">

<input type="radio" name="ck01" onclick="tableClicked(event)"
value="上海" />
上海
<input type="radio" name="ck01" onclick="tableClicked(event)"
value="云南" />
云南
<input type="radio" name="ck01" onclick="tableClicked(event)"
value="贵州" />
贵州
</div>
<div id="c02">

<input type="radio" name="ck01" onclick="tableClicked(event)"
value="黑龙江" />
黑龙江
<input type="radio" name="ck01" onclick="tableClicked(event)"
value="吉林" />
吉林
<input type="radio" name="ck01" onclick="tableClicked(event)"
value="辽宁" />
辽宁
</div>
<div id="c03">

<input type="radio" name="ck01" onclick="tableClicked(event)"
value="美国"/>
美国
<input type="radio" name="ck01" onclick="tableClicked(event)"
value="阿富汗" />
阿富汗
<input type="radio" name="ck01" onclick="tableClicked(event)"
value="日本" />
日本
</div>
</div>
</div>
</div>
<form>
</body>
</html>看看你能用的上吗，