jquery、div、css制作遮挡层

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

遮挡层效果图：

遮挡层实现原理：

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

JavaScript代码：

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

遮挡层图片：