jQuery DIV弹出效果实现代码


Posted in Javascript onJuly 03, 2009

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

jQuery DIV弹出效果实现代码

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"); 
}
Javascript 相关文章推荐
javascript jq 弹出层实例
Aug 25 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
vue.js轮播图组件使用方法详解
Jul 03 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
vue实现井字棋游戏
Sep 29 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
Javascript 遍历对象中的子对象
Jul 03 #Javascript
javascript web页面刷新的方法收集
Jul 02 #Javascript
javascript 操作文件 实现方法小结
Jul 02 #Javascript
javascript new 需不需要继续使用
Jul 02 #Javascript
ExtJS GTGrid 简单用户管理
Jul 01 #Javascript
JQuery 风格的HTML文本转义
Jul 01 #Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 #Javascript
You might like
PHP新手上路(四)
2006/10/09 PHP
php身份证号码检查类实例
2015/06/18 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python+django加载静态网页模板解析
2017/12/12 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
python远程连接MySQL数据库
2019/04/19 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
python中pop()函数的语法与实例
2020/12/01 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
如何进行Linux分区优化
2013/02/12 面试题
钳工实习自我鉴定
2013/09/19 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
大家访活动实施方案
2014/03/10 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
毕业典礼主持词
2015/06/29 职场文书
创业计划书之烤红薯
2019/09/26 职场文书