快捷導(dǎo)航

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

更新時(shí)間：2009年07月03日 15:35:59 作者：

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

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

HTML代碼

復(fù)制代碼代碼如下:

<div id='pop-div' style="width: 300px" class="pop-box" > 
<h4>標(biāo)題位置</h4> 
<div class="pop-box-body" > 
<p> 
正文內(nèi)容 
</p> 
</div> 
<div class='buttonPanel' style="text-align: right" style="text-align: right"> 
<input value="Close" id="btn1" onclick="hideDiv('pop-div');" type="button" /> 
</div> 
</div>

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

復(fù)制代碼代碼如下:

.pop-box { 
z-index: 9999; /*這個(gè)數(shù)值要足夠大，才能夠顯示在最上層*/ 
margin-bottom: 3px; 
display: none; 
position: absolute; 
background: #FFF; 
border:solid 1px #6e8bde; 
} 

.pop-box h4 { 
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-x 0 0; 
} 

.pop-box-body { 
clear: both; 
margin: 4px; 
padding: 2px; 
}

JS代碼

復(fù)制代碼代碼如下:

function popupDiv(div_id) { 
var div_obj = $("#"+div_id); 
var windowWidth = document.documentElement.clientWidth; 
var windowHeight = document.documentElement.clientHeight; 
var popupHeight = div_obj.height(); 
var popupWidth = div_obj.width(); 
//添加并顯示遮罩層 
$("<div id='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"); 
} 

function hideDiv(div_id) { 
$("#mask").remove(); 
$("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow"); 
}