彈出模式化遮罩層的方法有很多，在本文為大家介紹下使用js實現最簡單的模式化遮罩層，具體如下，感興趣的朋友不要錯過
假設我們有一個容器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>