先上个效果图，可以点击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"); }

　　推荐阅读

　　JS 自动完成 AutoComplete(Ajax 查询)

一：JS 部分复制代码 代码如下://******************************************************** //创建日期: 2009-03-10 //作 者: oloen //內容说明:　自动完成JS类 //用法： // var auto = new autoComplete(客户端>>>详细阅读

本文标题：jQuery DIV弹出效果实现代码

地址：http://www.17bianji.com/kaifa2/JS/28499.html

 1/2    1