假設(shè)我們有一個(gè)容器container如下:

復(fù)制代碼 代碼如下:

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

復(fù)制代碼 代碼如下:

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

復(fù)制代碼 代碼如下:

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