您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“怎么用jQuery代碼實現(xiàn)DIV彈出效果”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用jQuery代碼實現(xiàn)DIV彈出效果”吧!
jQuery DIV彈出效果實現(xiàn)代碼
現(xiàn)在很多網(wǎng)站都流行這種DIV彈出式的對話框或是信息顯示框,很想將這個流行元素加入到自己的項目中。使用jQuery可以不費(fèi)大力氣實現(xiàn)這種效果。將其記錄到我的Blog中,與業(yè)界朋友們起分享。
先上個效果圖,可以點擊Close按鈕或是在遮罩層上任意處點擊,就可以關(guān)閉DIV彈出層。
HTML代碼
代碼如下:
<dividdivid='pop-div'style="width:300px"class="pop-box"> <h5>標(biāo)題位置</h5> <divclassdivclass="pop-box-body"> <p>
正文內(nèi)容
</p> </div> <divclassdivclass='buttonPanel'style="text-align:right"style="text-align:right"> <inputvalueinputvalue="Close"id="btn1"onclick="hideDiv('pop-div');"type="button"/> </div> </div>
代碼很簡潔。最外層是一個大的DIV作為彈出層的容器,H4作為DIV彈出層的標(biāo)題,又一個DIV用于彈出層正文內(nèi)容顯示,再一個Div用于放置一些按鈕。
CSS代碼
代碼如下:
.pop-box{ z-index:9999;/*這個數(shù)值要足夠大,才能夠顯示在最上層*/ margin-bottom:3px; display:none; position:absolute; background:#FFF; border:solid1px#6e8bde; } .pop-boxh5{ color:#FFF; cursor:default; height:18px; font-size:14px; font-weight:bold; text-align:left; padding-left:8px; padding-top:4px; padding-bottom:2px; background:url("../images/header_bg.gif")repeat-x00; } .pop-box-body{ clear:both; margin:4px; padding:2px; }
JS代碼
代碼如下:
functionpopupDiv(div_id){ vardiv_obj=$("#"+div_id); varwindowWidth=document.documentElement.clientWidth; varwindowHeight=document.documentElement.clientHeight; varpopupHeight=div_obj.height(); varpopupWidth=div_obj.width(); //添加并顯示遮罩層 $("<dividdivid='mask'></div>").addClass("mask") .width(windowWidth*0.99) .height(windowHeight*0.99) .click(function(){hideDiv(div_id);}) .appendTo("body") .fadeIn(200); div_obj.css({"position":"absolute"}) .animate({left:windowWidth/2-popupWidth/2, top:windowHeight/2-popupHeight/2,opacity:"show"},"slow"); } functionhideDiv(div_id){ $("#mask").remove(); $("#"+div_id).animate({left:0,top:0,opacity:"hide"},"slow"); }
到此,相信大家對“怎么用jQuery代碼實現(xiàn)DIV彈出效果”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。