jquery彈出灰色層

字號(hào):


    jquery彈出灰色的提示框,可以在框內(nèi)寫任何東西。通過對(duì)層的定位,寬,高,透明度進(jìn)行更改。來實(shí)現(xiàn)層的疊加顯示,最終實(shí)現(xiàn)彈出灰色提示框.
    先看主要代碼。
    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的類的圖片。點(diǎn)擊則執(zhí)行背景層顯示,并設(shè)定寬度為自動(dòng),高度為文檔高度(即從上到下)。
    然后,將圖片寫入到顯示層內(nèi)容。并設(shè)置顯示層的top left位置,top left分別為文檔高度-滾動(dòng)高度-一半的圖像高度,window的寬度-一半的圖片寬度。
    設(shè)置完畢后,添加click事件。點(diǎn)擊圖片則隱藏兩個(gè)層。
    中間圖片層。(這個(gè)就根據(jù)自己需求來定了)。我用的是圖片
    <center>
    <img src="images/L_ad.jpg" >
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg" >
    </center>
    <center>
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg">
    </center>
    <center>
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg">
    <img src="images/L_ad.jpg">
    </center>
    //這里是隱藏的層了。通過jquery對(duì)隱藏層的操作來實(shí)現(xiàn)彈出灰色的層。
    第一個(gè)層是灰色的背景層
    <div id="showImg"></div>
    第二個(gè)層是顯示的內(nèi)容層。
    <div id="showImg_content"></div>
    看懂彈出灰色層,提示框的內(nèi)容了么。點(diǎn)擊看看下面特效。