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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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
德生9700DX电路分析
2021/03/02 无线电
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
JS判断不能为空实例代码
2013/11/26 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python实现排序算法解析
2018/09/08 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python实现大转盘抽奖效果
2019/01/22 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
高校自主招生自荐信
2013/12/09 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
诉讼授权委托书
2014/10/15 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
盗窃案辩护词
2015/05/21 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
vue实现拖拽交换位置
2022/04/07 Vue.js