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>

看懂彈出灰色層，提示框的內容了么。點擊看看下面特效。

更多信息請查看IT技術專欄