jquery弹出灰色层

3w.foa($)sp.cn

jquery弹出灰色的提示框，可以在框内写任何东西。通过对层的定位,宽,高,透明度进行更改。来实现层的叠加显示，最终实现弹出灰色提示框.

先看主要代码。
jquery，操作代码：
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(function(){
 $("img[class='foraspcn']").each(function(index){
  $("#showImg").show().css("height",$(document).height());
   $("#showImg_content").html("<img src="+$(this).attr("src")+">").show().css({"top":$(window).height()*0.5+$(window).scrollTop()-

$("#showImg_content>img").height()*0.5,"left":$(window).width()*0.5-$("#showImg_content>img").width()*0.5}).click(function(){$("#showImg").hide

();$(this).hide();});
  });
});
解释一下代码：选出所有的class=foraspcn的类的图片。点击则执行背景层显示，并设定宽度为自动，高度为文档高度(即从上到下)。
然后，将图片写入到显示层内容。并设置显示层的top left位置，top left分别为文档高度-滚动高度-一半的图像高度，window的宽度-一半的图片宽度。
设置完毕后，添加click事件。点击图片则隐藏两个层。

中间图片层。(这个就根据自己需求来定了)。我用的是图片
<center>
<img src="images/L_ad.jpg" border="0" class="foraspcn" >
<img src="images/L_ad.jpg" border="0" class="foraspcn">
<img src="images/L_ad.jpg" class="foraspcn" border="0" >
</center>
<center>
<img src="images/L_ad.jpg" class="foraspcn">
<img src="images/L_ad.jpg" class="foraspcn">
<img src="images/L_ad.jpg" class="foraspcn">
</center>
<center>
<img src="images/L_ad.jpg" class="foraspcn">
<img src="images/L_ad.jpg" class="foraspcn">
<img src="images/L_ad.jpg" class="foraspcn">
</center>
//这里是隐藏的层了。通过jquery对隐藏层的操作来实现弹出灰色的层。
第一个层是灰色的背景层
<div style="background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; text-align:center; display:none; width:100%; opacity:0.5;filter: alpha

(opacity=50);-moz-opacity: 0.5;" id="showImg"></div>
第二个层是显示的内容层。
<div  style=" position:absolute;width:auto; border:#F00 solid 1px; z-index:100; text-align:center;" id="showImg_content"></div>
看懂弹出灰色层，提示框的内容了么。点击看看下面特效。

查看效果：弹出灰色的提示层