假設我們有一個容器container如下: 複製程式碼 程式碼如下: 程式碼如下: <BR>#container{width:auto;height:auto; overflow:hidden;} <BR>/*這裡的overflow:hidden;屬性主要是為了設定使超出container的部分自動隱藏，之所以設定這個屬性，是為了解決ie8及以下版本瀏覽器相容性問題*/ 現在要在網頁中彈出一個div層，使在關閉彈出的div層之前不可操作container。 那麼，我們首先要定義出這個遮罩的div層如下: 複製程式碼 程式碼如下: 接下來，就是用js來使遮罩層始終顯示在螢幕上並不可操作遮罩層下面的內容，點選關閉按鈕關閉遮罩層複製程式碼 程式碼如下: <BR>$(function(){ <BR> //取得目前瀏覽器的內部寬和高<BR>varnWidth = window.innerWidth; <BR>varnHeight = window.innerHeight; <BR>//設定遮罩層的寬與高<BR>$("#shade ").width(nWidth); <BR>$("#shade").height(nHeight); <BR>//設定關閉按鈕居中顯示<BR>$("#close").css("margin- top",nHeight/2-50 "px"); <BR>//設定當瀏覽器大小改變時觸發的事件<BR>$(window).resize(function(){ <BR>//取得目前瀏覽器的內部寬和高<BR>varnWidth = window.innerWidth; <BR>varnHeight = window.innerHeight; <BR>//設定遮罩層的寬和高<BR>$("#shade").width( nWidth); <BR>$("#shade").height(nHeight); <BR>//設定關閉按鈕居中顯示<BR>$("#putPwd").css("margin-top",nHeight/ 2-50 "px"); <BR>}); <BR>//設定關閉按鈕消除遮罩層<BR>$("#close").click(function(){ <BR>$("# shade").removeAttr("id"); <BR>$("#shade").html(""); <BR>}); <BR>//也可用純js來寫<BR>Document. getElementById(“shade”).style…….; //後面多說無益，如果有興趣又實在不會寫，可以和本人聯繫。 })
