這里和大家分享一下jQuery DIV彈出效果實(shí)現(xiàn)代碼，這種DIV彈出式的對(duì)話框或是信息顯示框現(xiàn)在在很多網(wǎng)站都比較流行，因?yàn)槭褂胘Query可以不費(fèi)大力氣實(shí)現(xiàn)這種效果，請(qǐng)看本文的詳細(xì)介紹。

jQuery DIV彈出效果實(shí)現(xiàn)代碼

現(xiàn)在很多網(wǎng)站都流行這種DIV彈出式的對(duì)話框或是信息顯示框，很想將這個(gè)流行元素加入到自己的項(xiàng)目中。使用jQuery可以不費(fèi)大力氣實(shí)現(xiàn)這種效果。將其記錄到我的Blog中，與業(yè)界朋友們起分享。

先上個(gè)效果圖，可以點(diǎn)擊Close按鈕或是在遮罩層上任意處點(diǎn)擊，就可以關(guān)閉DIV彈出層。

HTML代碼

代碼如下: 

<dividdivid='pop-div'style="width:300px"class="pop-box"> 
<h4>標(biāo)題位置</h4> 
<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> 

 代碼很簡潔。最外層是一個(gè)大的DIV作為彈出層的容器，H4作為DIV彈出層的標(biāo)題，又一個(gè)DIV用于彈出層正文內(nèi)容顯示，再一個(gè)Div用于放置一些按鈕。

CSS代碼

代碼如下: 

.pop-box{  
z-index:9999;/*這個(gè)數(shù)值要足夠大，才能夠顯示在最上層*/  
margin-bottom:3px;  
display:none;  
position:absolute;  
background:#FFF;  
border:solid1px#6e8bde;  
}  
 
.pop-boxh4{  
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");  
}  
 

 詳細(xì)出處參考：http://www.jb51.net/article/18950.htm

【編輯推薦】

1. 兩種方式解決DIV彈出窗口問題
2. CSS樣式表特點(diǎn)及嵌入網(wǎng)頁的四種途徑
3. CSS中DIV彈出層問題解決方案
4. CSS外邊距設(shè)置屬性margin用法
5. 探究CSS高級(jí)語法中選擇器分組和CSS繼承用法