假設我們有一個容器container如下:
複製代碼代碼如下:
<style type=”text/css”>
#container{width:auto;height:auto; overflow:hidden;}
/*這裡的overflow:hidden;屬性主要是為了設定使超出container的部分自動隱藏，之所以設定這個屬性，是為了解決ie8及以下版本瀏覽器相容性問題*/
</style>
<div id=”container” >
</div>
現在要在網頁中彈出一個div層，使在關閉彈出的div層之前不可操作container。
那麼，我們首先要定義出這個遮罩的div層如下:
複製代碼代碼如下:
<div id=”continer”>
<!―只所以將遮罩層放到container裡面
<divid=”shade” style=”width:1600px;height:900px;/*給遮罩層一個初始大小*/”>
<input name=”close” id=”close” value=”關閉”>
</div>
</div>
接下來，就是用js來使遮罩層始終顯示在螢幕上並不可操作遮罩層下面的內容，點選關閉按鈕關閉遮罩層
複製代碼代碼如下:
<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>