基于jquery的模态div层弹出效果


Posted in Javascript onAugust 21, 2010

经过几多周折,终于搞出来了,效果图如下:
基于jquery的模态div层弹出效果
具体实现:
(1) 编写 jquery.divbox.js 的代码:

jQuery.fn.extend( 
{ 
OpenDiv: function() 
{ 
var sWidth, sHeight; 
sWidth = window.screen.availWidth; 
if (window.screen.availHeight > document.body.scrollHeight) 
{ 
sHeight = window.screen.availHeight; 
} else 
{ 
sHeight = document.body.scrollHeight + 20; 
} 
var maskObj = document.createElement("div"); 
maskObj.setAttribute('id', 'BigDiv'); 
maskObj.style.position = "absolute"; 
maskObj.style.top = "0"; 
maskObj.style.left = "0"; 
maskObj.style.background = "#111"; 
maskObj.style.filter = "Alpha(opacity=70);"; 
maskObj.style.opacity = "0.7"; 
maskObj.style.width = sWidth + "px"; 
maskObj.style.height = sHeight + "px"; 
maskObj.style.zIndex = "10000"; 
$("body").attr("scroll", "no"); 
document.body.appendChild(maskObj); 
$("#BigDiv").data("divbox_selectlist", $("select:visible")); 
$("select:visible").hide(); 
$("#BigDiv").attr("divbox_scrolltop", $.ScrollPosition().Top); 
$("#BigDiv").attr("divbox_scrollleft", $.ScrollPosition().Left); 
$("#BigDiv").attr("htmloverflow", $("html").css("overflow")); 
$("html").css("overflow", "hidden"); 
window.scrollTo($("#BigDiv").attr("divbox_scrollleft"), $("#BigDiv").attr("divbox_scrolltop")); 
var MyDiv_w = this.width(); 
var MyDiv_h = this.height(); 
MyDiv_w = parseInt(MyDiv_w); 
MyDiv_h = parseInt(MyDiv_h); 
var width = $.PageSize().Width; 
var height = $.PageSize().Height; 
var left = $.ScrollPosition().Left; 
var top = $.ScrollPosition().Top; 
var Div_topposition = top + (height / 2) - (MyDiv_h / 2); 
var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); 
this.css("position", "absolute"); 
this.css("z-index", "10001"); 
this.css("background", "#fff"); 
this.css("left", Div_leftposition + "px"); 
this.css("top", Div_topposition + "px"); 
if ($.browser.mozilla) 
{ 
this.show(); 
return; 
} 
this.fadeIn("fast"); 
} 
, CloseDiv: function() 
{ 
if ($.browser.mozilla) 
{ 
this.hide(); 
} else 
{ 
this.fadeOut("fast"); 
} $("html").css("overflow", $("#BigDiv").attr("htmloverflow")); 
window.scrollTo($("#BigDiv").attr("divbox_scrollleft"), $("#BigDiv").attr("divbox_scrolltop")); 
$("#BigDiv").data("divbox_selectlist").show(); 
$("#BigDiv").remove(); 
} 
}); 
$.extend( 
{ 
PageSize:function () 
{ 
var width=0; 
var height=0; 
width=window.innerWidth!=null?window.innerWidth:document.documentElement&&document.documentElement.clientWidth?document.documentElement.clientWidth:document.body!=null?document.body.clientWidth:null; 
height=window.innerHeight!=null?window.innerHeight:document.documentElement&&document.documentElement.clientHeight?document.documentElement.clientHeight:document.body!=null?document.body.clientHeight:null; 
return {Width:width,Height:height}; 
} 
,ScrollPosition:function () 
{ 
var top=0,left=0; 
if($.browser.mozilla) 
{ 
top=window.pageYOffset; 
left=window.pageXOffset; 
} 
else if($.browser.msie) 
{ 
top=document.documentElement.scrollTop; 
left=document.documentElement.scrollLeft; 
} 
else if(document.body) 
{ 
top=document.body.scrollTop; 
left=document.body.scrollLeft; 
} 
return {Top:top,Left:left}; 
} 
});

(2) 网页中需引用两个js, jquery.divbox.js 和 jquery.js

(3) 测试页面代码:

<html> 
<head> 
<title>测试</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.divbox.js"></script> 
<style> 
#divSCA 
{ 
position: absolute; 
width: 700px; 
height: 500px; 
font-size: 12px; 
background: #fff; 
border: 0px solid #000; 
z-index: 10001; 
display: none; 
} 
</style> 
<script type="text/javascript"> 
function openDiv() { 
$("#divSCA").OpenDiv(); 
} 
function closeDiv() { 
$("#divSCA").CloseDiv(); 
} 
</script> 
</head> 
<body> 
<div id="divSCA"> 
<font size="50">这是模态DIV,点击关闭</font> 
<input type="button" value="关闭" onclick="closeDiv()"> 
</div> 
<input type="button" value="弹出" onclick="openDiv()"/> 
测试能否覆盖 select 
<select> 
<option>测试1</option> 
<option>测试2</option> 
<option>测试3</option> 
</select> 
</body> 
</html>

(4) 测试代码及源文件下载地址:

点击下载

Javascript 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
复制js对象方法(详解)
Jul 08 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
浅析node.js中close事件
Nov 26 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 #Javascript
ExtJs中简单的登录界面制作方法
Aug 19 #Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 #Javascript
JS面向对象编程之对象使用分析
Aug 19 #Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 #Javascript
jquery插件之easing使用
Aug 19 #Javascript
为Extjs加加速(javascript加速)
Aug 19 #Javascript
You might like
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JavaScript Split()方法
2015/12/18 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python友情链接检查方法
2015/07/08 Python
Python实现身份证号码解析
2015/09/01 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python中print函数简单使用总结
2019/08/05 Python
python取均匀不重复的随机数方式
2019/11/27 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
事假请假条范文
2014/04/11 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
创先争优个人总结
2015/03/04 职场文书
七一表彰大会简报
2015/07/20 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
学校体育节班级口号
2015/12/25 职场文书
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS