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编程起步(第一课)
Jan 10 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
小程序实现列表删除功能
Oct 30 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
如何开发一个虚拟域名系统
2006/10/09 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
利用ctypes提高Python的执行速度
2016/09/09 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python多线程的退出控制实现
2020/08/10 Python
C#面试题问题集
2016/04/02 面试题
EJB timer的种类
2014/10/28 面试题
总经理人事任命书
2014/06/05 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Python利用folium实现地图可视化
2021/05/23 Python
代码解析React中setState同步和异步问题
2021/06/03 Javascript