jquery、div、css制作遮挡层

在日常开发中经常会用到遮挡层，一直没有机会研究，今天实现了，感觉原理原来如此简单。不过，这些很小的知识点，必须都弄清楚，真是应了那句老话，基础好，才能走的远。

遮挡层效果图：

遮挡层实现原理：

  修改某个隐藏的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>

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

遮挡层图片：