<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>22222</title>
<script type="text/javascript" src="./jquery-1.6.2.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#change").click(
function(){
$("#real").css("display","block");
$("#mask").css("display","block");
var w=document.documentElement.clientWidth ;//可见区域宽度
var h=document.documentElement.clientHeight;//可见区域高度
ss=document.getElementById('ha');
//alert(w);
$("#mask").css("width",w+"px");
$("#mask").css("height",h+"px");
$("#real").css("width",w+"px");
$("#real").css("height",h+"px");
//left:auto;top:auto;
}
);
}
);
</script>
</head>
<body>
<div>
<div>
<table id="checkShowTable"
style="margin-top: 10px;">
<tr>
<th >1</th>
<th >2</th>
<th >3</th>
<th >4</th>
<th >5</th>
<th >6</th>
<th >7</th>
</tr>
</table>
<input type="button" value="查询"id="change">
</div>
<div id="mask" style="left:0;top:0;z-index:99;display:none;filter:alpha(opacity=40);opacity: 0.5;position:absolute;background-color: black;width: 100%;height: 100%"></div>
<div id="real" style="position:absolute;left:0;top:0;z-index:1000;width:100%;height: 100%;display:none;">
<div id="realInput"style="margin:auto;;width:800px;height:600px;background-color:blue">
3232<br>
wewe
wewe</div>
</div>
</body>
</html>
注：
id=mask 用来遮蔽原始的body 重要样式（filter:alpha(opacity=40);opacity: 0.5;position:absolute；"left:0;top:0;width: 100%;height: 100%）
id=real 的div用来建立占用所有body空间的然后
里面的id=realInput 的div是真的输入框内容 输入框自己定义着写 我只是乱写一些来代替