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

現(xiàn)在要在網(wǎng)頁(yè)中彈出一個(gè)div層，使在關(guān)閉彈出的div層之前不可操作container。
那么，我們首先需要定義出這個(gè)遮罩的div層如下:

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

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

接下來(lái)，就是用js來(lái)使遮罩層始終顯示在屏幕上并不可操作遮罩層下面的內(nèi)容，點(diǎn)擊關(guān)閉按鈕關(guān)閉遮罩層

復(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來(lái)寫(xiě) 
Document.getElementById(“shade”).style…….; 
//后面多說(shuō)無(wú)益，如果有興趣又實(shí)在不會(huì)寫(xiě)，可以和本人聯(lián)系。 
}) 
</script> 