在日常开发中经常会用到遮挡层，一直没有机会研究，今天实现了，感觉原理原来如此简单。不过，这些很小的知识点，必须都弄清楚，真是应了那句老话，基础好，才能走的远。
遮挡层效果图：
遮挡层实现原理：
修改某个隐藏的div样式，由隐藏修改为展现，宽度和高度与浏览器窗口相等。
注意细节：
div需要设置z-index,这个属性，顾名思义，是在z轴上的索引，你可以理解为垂直于屏幕的高度，值越大，元素就会越在前方。z-index要比一般的元素值大。
z-index只有在元素position:absolute时，才会起作用。所以，元素要设置为postion:absolute;top:0;left:0;
背景图片，使用默认的x与y轴重复，即可。
实现代码：
html代码
<button οnclick="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>
JavaScript代码：
function show(){
$("#zhedangceng").css({
"width":$(document).width(),
"height":$(document).height()
})
}
function hide(){
$("#<span style="font-family: Arial, Helvetica, sans-serif;">zhedangceng</span>").hide();
}
遮挡层图片：
