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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
微信小程序实现星级评价
Nov 20 Javascript
js回调函数原理与用法案例分析
Mar 04 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生成扭曲及旋转的验证码图片
2013/06/07 PHP
PHP反射机制用法实例
2014/08/28 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python列表对象实现原理详解
2019/07/01 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
详解Python3 pandas.merge用法
2019/09/05 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Python对excel的基本操作方法
2021/02/18 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
黄金搭档广告词
2014/03/21 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
大学班长竞选稿
2015/11/20 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电