使用jQuery实现DIV弹出效果

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

 

先上个效果图，可以点击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" mce_style="text-align: right"> <input value="Close" id="btn1" οnclick="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"); }