在日常開發中經常會用到遮擋層，一直沒有機會研究，今天實現了，感覺原理原來如此簡單。不過，這些很小的知識點，必須都弄清楚，真是應了那句老話，基礎好，才能走的遠。

遮擋層效果圖：

遮擋層實現原理：

  修改某個隱藏的div樣式，由隱藏修改為展現，寬度和高度與瀏覽器視窗相等。

注意細節：

   div需要設定z-index,這個屬性，顧名思義，是在z軸上的索引，你可以理解為垂直於螢幕的高度，值越大，元素就會越在前方。z-index要比一般的元素值大。

  z-index只有在元素position:absolute時，才會起作用。所以，元素要設定為postion:absolute;top:0;left:0;

  背景圖片，使用預設的x與y軸重複，即可。

實現程式碼：

 html程式碼

<button onclick="s<span style="font-family: Arial, Helvetica, sans-serif;">click me</button>
<div id="zhedangceng" 
	style="display:none;position:absolute;top:0px;left:0px;z-index:10;background-image:url(./indexassets/alphabg.png)"></div>
 

function show(){
$("#zhedangceng").css({
"width":$(document).width(),
"height":$(document).height()
}) 
}
function hide(){
     $("#<span style="font-family: Arial, Helvetica, sans-serif;">zhedangceng</span>").hide();
}

遮擋層圖片：