彈出最簡單的模式化遮罩層的js代碼

 彈出模式化遮罩層的方法有很多，在本文為大家介紹下使用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>