封装的原生javascript弹出层代码


Posted in Javascript onSeptember 24, 2010
<script type="text/javascript">// <![CDATA[ 
/* @author: hongru.chen 
** @date: 2010-09-15 
** @vision: 1.1 
*/ 
var Hongru = {}; 
function $(id){return document.getElementById(id)} 
Object.prototype.extend = function(target, /*optional*/source, /*optional*/deep) { 
target = target || {}; 
var sType = typeof source, i = 1, options; 
if( sType === 'undefined' || sType === 'boolean' ) { 
deep = sType === 'boolean' ? source : false; 
source = target; 
target = this; 
} 
if( typeof source !== 'object' && Object.prototype.toString.call(source).call(source) !== '[object Function]' ) 
source = {}; while(i <= 2) { 
options = i === 1 ? target : source; 
if( options != null ) { 
for( var name in options ) { 
var src = target[name], copy = options[name]; 
if(target === copy) 
continue; 
if(deep && copy && typeof copy === 'object' && !copy.nodeType) 
target[name] = this.extend(src || 
(copy.length != null ? [] : {}), copy, deep); 
else if(copy !== undefined) 
target[name] = copy; 
} 
} 
i++; 
} 
return target; 
}; 
isFunction = function( fn ) { 
return !!fn && typeof fn != "string" && !fn.nodeName && 
fn.constructor != Array && /^[\s[]?function/.test( fn + "" ); 
} 
Hongru.box = function(){ 
var box,mask,content,_content,_height,_width,isPreload,flag = false; 
return{ 
open:function(con,options){ 
//default options 
var defaultOptions = { 
width:300, 
height:200, 
isPre:true, 
time:0, 
title:'对话框', 
isBar:true, 
isShut:true 
}; 
options = options?options:{}; 
options = Object.extend(defaultOptions,options); 
if(!flag){ 
box = document.createElement('div');box.id = "popup-box"; 
box.style.cssText = "position:absolute; display:none; background:#fff url(preload.gif) no-repeat 50% 50%; border:5px solid #ccc; z-index:2000"; 
mask = document.createElement('div');mask.id = "popup-mask"; 
mask.style.cssText = "position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500"; 
content = document.createElement('div');content.id = "popup-content"; 
content.style.cssText = "background:#fff"; 
bar = document.createElement('div'); bar.id = "popup-bar"; 
bar.style.cssText = "background:none repeat scroll 0 0 #F7F7F7;border-bottom:4px solid #EEEEEE;border-top:3px solid #F9F9F9;margin-top:2px;position:relative"; 
wrapTit = document.createElement('div'); wrapTit.id = "wrap-tit"; 
wrapTit.style.cssText = "background:none repeat scroll 0 0 #F3F3F3;border-bottom:5px solid #F1F1F1;border-top:4px solid #F5F5F5;line-height:5px;margin-top:3px;"; 
tit = document.createElement('span'); tit.id = "popup-tit"; 
tit.style.cssText = "cursor:text;margin-left:10px;position:relative;color:#333;font-size:84%" 
shut = document.createElement('a'); shut.id = "popup-shut"; 
shut.innerHTML = '×'; 
shut.style.cssText = "color:#34538B;cursor:pointer;font-family:Tahoma;font-weight:bold;position:absolute;top:0px;right:10px;text-decoration:none;"; 
document.body.appendChild(mask); document.body.appendChild(box); box.appendChild(bar); box.appendChild(content); bar.appendChild(wrapTit); bar.appendChild(shut); wrapTit.appendChild(tit); 
mask.onclick = shut.onclick = Hongru.box.hide; 
//bar.onclick = function(){alert($('sure').id)} 
window.onresize = Hongru.box.resize; 
flag = true; 
}tit.innerHTML = options.title; 
options.isShut?shut.style.display = '':shut.style.display = 'none'; 
options.isBar?bar.style.display = '':bar.style.display = 'none'; 
if(!options.isPre){ 
box.style.width = options.width?options.width+'px':'auto'; 
box.style.height = options.height?options.height+'px':'auto'; 
box.style.backgroundImage = 'none'; 
content.innerHTML = con; 
} 
else{ 
content.style.display = 'none'; 
box.style.width = box.style.height = '100px'; 
} 
this.mask(); 
this.alpha(mask,1,50); 
_content = con; _height = options.height; _width = options.width; isPreload = options.isPre; 
if(options.time){ 
setTimeout(function(){Hongru.box.hide()},1000*options.time); 
} 
}, 
fill:function(con,options){ 
if(options.isPre){ 
if(!options.width || !options.height){ 
var autoWidth = box.style.width, autoHeight = box.style.height; 
content.innerHTML = con; 
box.style.width = options.width?options.width+'px':''; 
box.style.height = options.height?options.height+'px':''; 
content.style.display = ''; 
options.width = parseInt(box.offsetWidth-10); 
options.height = parseInt(box.offsetHeight-10); 
content.style.display = 'none'; 
box.style.width = autoWidth; 
box.style.height = autoHeight; 
} 
else{ 
content.innerHTML = con; 
} 
this.size(box,options.width,options.height); 
} 
else{ 
box.style.backgroundImage = 'none'; 
} 
}, 
hide:function(){ 
Hongru.box.alpha(box,-1,0); 
}, 
resize:function(){ 
Hongru.box.pos(); 
Hongru.box.mask(); 
}, 
mask:function(){ 
mask.style.height = Hongru.page.total(1)+'px'; 
mask.style.width=''; mask.style.width = Hongru.page.total(0)+'px'; 
}, 
pos:function(){ 
var minTop = (Hongru.page.height()/2)-(box.offsetHeight/2); minTop = minTop<10?10:minTop; 
box.style.top=(minTop+Hongru.page.top())+'px'; 
box.style.left=(Hongru.page.width()/2)-(box.offsetWidth/2)+'px'; 
}, 
alpha:function(obj,direction,destination){ 
clearInterval(obj.animing); 
if(direction == 1){ 
obj.style.opacity=0; obj.style.filter='alpha(opacity=0)'; 
obj.style.display='block'; this.pos(); 
} 
obj.animing = setInterval(function(){Hongru.box.alphaAnim(obj,destination,direction)},50); 
}, 
alphaAnim:function(obj,destination,direction){ 
var opacity = Math.round(obj.style.opacity*100); 
if(opacity == destination){ 
clearInterval(obj.animing); 
if(direction == -1){ 
obj.style.display='none'; 
obj == box?Hongru.box.alpha(mask,-1,0):content.innerHTML=box.style.backgroundImage=''; 
}else{ 
curOptions = {width:_width,height:_height,isPre:isPreload} 
obj == mask?this.alpha(box,1,100):Hongru.box.fill(_content,curOptions); 
} 
}else{ 
var n=Math.ceil((opacity+((destination-opacity)*.5))); n=n==1?0:n; 
obj.style.opacity=n/100; 
obj.style.filter='alpha(opacity='+n+')'; 
} 
}, 
size:function(obj,width,height){ 
obj = typeof obj == 'object' ? obj : $(obj); 
clearInterval(obj.sizing); 
var offsetW = obj.offsetWidth, offsetH = obj.offsetHeight, 
otherW = offsetW-parseInt(obj.style.width), otherH = offsetH-parseInt(obj.style.height); 
var wFlag = (offsetW-otherW>width)?0:1, hFlag = (offsetH-otherH>height)?0:1; 
obj.sizing = setInterval(function(){Hongru.box.sizeAnim(obj,width,otherW,wFlag,height,otherH,hFlag)},20); 
}, 
sizeAnim:function(obj,width,otherW,wFlag,height,otherH,hFlag){ 
var objW = obj.offsetWidth-otherW, objH = obj.offsetHeight-otherH; 
if(objW == width && objH == height){ 
clearInterval(obj.sizing); 
box.style.backgroundImage='none'; 
content.style.display='block'; 
}else{ 
if(objW!=width){ 
var n = objW+((width-objW)*.5); 
obj.style.width = wFlag?Math.ceil(n)+'px':Math.floor(n)+'px'; 
} 
if(objH!=height){ 
var n = objH+((height-objH)*.5); 
obj.style.height = hFlag?Math.ceil(n)+'px':Math.floor(n)+'px'; 
} 
this.pos(); 
} 
}, 
ask:function(message,options,sureCall,cancelCall){ 
var elements = '<div class="wrap-remind" style="text-align:center">'+message+'<p><button id="sure-btn" class="sure-btn">确认</button>  <button id="cancel-btn" class="cancel-btn">取消</button></p></div>'; 
Hongru.box.open(elements,options); 
function delay(){//回调 
if(($('sure-btn') && $('cancel-btn')) != null){ 
clearInterval(checkComplete); 
//alert('yes'); 
$('sure-btn').onclick = function(){ 
if(isFunction(sureCall)){sureCall.call(this);} 
} 
$('cancel-btn').onclick = function(){ 
if(isFunction(cancelCall)){cancelCall.call(this);} 
Hongru.box.hide(); 
} 
}} 
var checkComplete = setInterval(delay,100); 
} 
} 
}(); 
Hongru.page=function(){ 
return{ 
top:function(){return document.documentElement.scrollTop||document.body.scrollTop}, 
width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth}, 
height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}, 
total:function(d){ 
var b=document.body, e=document.documentElement; 
return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)): 
Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth)) 
} 
} 
}(); 
// ]]></script>

不设任何options参数的box(默认高200px,宽300px)
普通设定高宽的box
高宽自适应内容高宽的box
不带预载动画的box
延迟自动消失的box
title自定义的box
不带标题栏的的box
不带标题栏关闭按钮的box
带按钮和回调参数的box

调用 Hongru.box.open(con,options)函数,参数con为弹出层主要内容,可以是html代码。options为一个object,可选参数目前有

{ 
width:300 //自定义,弹出层主体(除边框和标题栏的宽度),为0时自适应。 
height:200//自定义,弹出层主体(除边框和标题栏的高度),为0时自适应。 
isPre:1 //true or false,是否有预加载背景图, 
time:0 //延迟自动关闭时间,秒为单位,0时不触发 
title:'' //自定义title 
isBar:1 //true or false,是否有标题栏 
isShut:1 //是否有关闭按钮 
}

另 Hongru.box.ask(con,options,surecall,cancelcall)为带按钮的提示框,带回调函数前两个参数同上,后两个参数分别为‘确认'和‘取消'的回调函数
其中加入了透明度渐变和大小渐变,透明度渐变主体函数如下:
show sourceview sourceprint?alphaAnim:function(obj,destination,direction){ 
var opacity = Math.round(obj.style.opacity*100); 
if(opacity == destination){ 
clearInterval(obj.animing); 
if(direction == -1){ 
obj.style.display='none'; 
obj == box?Hongru.box.alpha(mask,-1,0):content.innerHTML=box.style.backgroundImage=''; 
}else{ 
curOptions = {width:_width,height:_height,isPre:isPreload} 
obj == mask?this.alpha(box,1,100):Hongru.box.fill(_content,curOptions); 
} 
}else{ 
var n=Math.ceil((opacity+((destination-opacity)*.5))); n=n==1?0:n; 
obj.style.opacity=n/100; 
obj.style.filter='alpha(opacity='+n+')'; 
} 
},

box大小渐变函数体如下:
show sourceview sourceprint?sizeAnim:function(obj,width,otherW,wFlag,height,otherH,hFlag){ 
var objW = obj.offsetWidth-otherW, objH = obj.offsetHeight-otherH; 
if(objW == width && objH == height){ 
clearInterval(obj.sizing); 
box.style.backgroundImage='none'; 
content.style.display='block'; 
}else{ 
if(objW!=width){ 
var n = objW+((width-objW)*.5); 
obj.style.width = wFlag?Math.ceil(n)+'px':Math.floor(n)+'px'; 
} 
if(objH!=height){ 
var n = objH+((height-objH)*.5); 
obj.style.height = hFlag?Math.ceil(n)+'px':Math.floor(n)+'px'; 
} 
this.pos(); 
} 
},

好了,废话不多说了,附上源文件打包下载:狠狠点击这里
如果觉得不错,请移驾点下 下面 的推荐
Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
js最简单的拖拽效果实现代码
Sep 24 #Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 #Javascript
IE无法设置短域名下Cookie
Sep 23 #Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 #Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 #Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 #Javascript
通过DOM脚本去设置样式信息
Sep 19 #Javascript
You might like
建立文件交换功能的脚本(一)
2006/10/09 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python提取网页中超链接的方法
2016/09/18 Python
python中返回矩阵的行列方法
2018/04/04 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python字符串的index和find的区别详解
2020/06/20 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
新书吧创业计划书
2014/01/31 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
企业指导教师评语
2014/04/28 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
搞笑结婚保证书
2015/05/08 职场文书
初中班主任教育随笔
2015/08/15 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python