jQuery DIV弹出效果实现代码

174 阅读 0 评论 115 点赞

我是靠谱客的博主背后水杯，最近开发中收集的这篇文章主要介绍jQuery DIV弹出效果实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

HTML代码

复制代码代码如下:

<div id='pop-div' style="width: 300px" class="pop-box" > 
<h4>标题位置</h4> 
<div class="pop-box-body" > 
<p> 
正文内容 
</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>

代码很简洁。最外层是一个大的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(); 
//添加并显示遮罩层 
$("<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"); 
}