<style type=”text/css”>
#container{width:auto;height:auto; overflow:hidden;}
/*這里的overflow:hidden;屬性主要是為了設置使超出container的部分自動隱藏，之所以設置這個屬性，是為了解決ie8及以下版本瀏覽器兼容性問題*/
</style>
<div id=”container” >
</div>

<div id=”continer”>
<!―只所以將遮罩層放到container里面
<divid=”shade” style=”width:1600px;height:900px;/*給遮罩層一個初始大小*/”>
<input name=”close” id=”close” value=”關閉”>
</div>
</div>

<script type=”text/javascript”>
$(function(){
//獲取當前瀏覽器的內部寬和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//設置遮罩層的寬和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//設置關閉按鈕居中顯示
$("#close").css("margin-top",nHeight/2-50+"px");
//設置當瀏覽器大小改變時觸發的事件
$(window).resize(function(){
//獲取當前瀏覽器的內部寬和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//設置遮罩層的寬和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//設置關閉按鈕居中顯示
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//設置關閉按鈕消除遮罩層
$("#close").click(function(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
//也可用純js來寫
Document.getElementById(“shade”).style…….;
//后面多說無益，如果有興趣又實在不會寫，可以和本人聯系。
})
</script>