先上个效果图，可以点击close按钮或是在遮罩层上任意处点击，就可以关闭弹出层。
html代码
复制代码 代码如下:
标题位置
正文内容
代码很简洁。最外层是一个大的div作为弹出层的容器，h4作为弹出层的标题，又一个div用于弹出层正文内容显示，再一个div用于放置一些按钮。
css代码
复制代码 代码如下:
.pop-box {
z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
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代码
复制代码 代码如下:
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();
//添加并显示遮罩层
$(
).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);
}