jquery+css简单实现div遮罩层显示或者隐藏

今天没什么事做就尝试了一下js，想做个遮罩，这个平时看很多网站都有实现这个功能，这个对大家来说都是非常简单的了，要是高手的就请忽略这篇文章了，就想着自己用简单的方式来实现以这个功能。

第一步：js代码

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(".tab_con img").click(function(){
		  //取消事件冒泡
          event.stopPropagation(); 
		 $(".bor").show("slow");
		  
		 var src=$(this).attr("alt");
		 var img_str="<img src='"+src+"' id='im' width='280' height='260' />";
		 $(".bor").css("padding-top","0");
		 $(".jiazhai").html(img_str);
		  
		 var wnd = $(window), doc = $(document);
    
       if(wnd.height() > doc.height()){  //当高度少于一屏
        wHeight = wnd.height();  
       }else{//当高度大于一屏
        wHeight = doc.height();   
       }
       //创建遮罩背景
       $("body").find("#MaskID").width(wnd.width()).height(wHeight)
       .css({position:"absolute",top:"0px",left:"0px",background:"#ccc",filter:"Alpha(opacity=80);",opacity:"0.8",zIndex:"100",display:"block"});
		
	});
</script>

第二步：css 样式

  #MyDiv{
  position:absolute;
  width:200px;
  height:200px;
  font-size:12px;
  background:#666;
  border:1px solid #000;
  z-index:100;
  display:none;
  text-align:center;
  }

第三步：html 代码，下面的图片路径替换成自己的图片就可以了

<div class='bor'>
   <div class="jiazhai"><img src="images/loading3.gif"  />正在加载……</div>
   <div class="colse">点击图片关闭</div>
</div>

<div id="MaskID"></div>

到此，一个简单的遮罩效果就有了，主要是用了绝对应对的层级关系，底层(body标签)背景覆盖整个屏幕，设置css样式z-index仅次于要弹出来的层，这样就顶层就在次层前面了，点击最顶一层就会隐藏背景了。