jQuery代码轻松实现DIV弹出效果-js弹出提示框代码

这里和大家分享一下jQuery DIV弹出效果实现代码，这种DIV弹出式的对话框或是信息显示框现在在很多网站都比较流行，因为使用jQuery可以不费大力气实现这种效果，请看本文的详细介绍。

jQuery DIV弹出效果实现代码

现在很多网站都流行这种DIV弹出式的对话框或是信息显示框，很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中，与业界朋友们起分享。

先上个效果图，可以点击Close按钮或是在遮罩层上任意处点击，就可以关闭DIV弹出层。

HTML代码

代码如下:

<dividdivid='pop-div'style="width:300px"class="pop-box"> 
<h4>标题位置</h4> 
<divclassdivclass="pop-box-body"> 
<p> 
 
1.
2.
3.
4.
5.

正文内容

</p> 
</div> 
<divclassdivclass='buttonPanel'style="text-align:right"style="text-align:right"> 
<inputvalueinputvalue="Close"id="btn1"onclick="hideDiv('pop-div');"type="button"/> 
</div> 
</div> 
1.
2.
3.
4.
5.
6.

代码很简洁。最外层是一个大的DIV作为弹出层的容器，H4作为DIV弹出层的标题，又一个DIV用于弹出层正文内容显示，再一个Div用于放置一些按钮。

CSS代码

代码如下:

.pop-box{  
z-index:9999;/*这个数值要足够大，才能够显示在最上层*/  
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;  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

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");  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

详细出处参考：http://www.jb51.net/article/18950.htm

【编辑推荐】