封装的原生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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
JS面向对象编程详解
Mar 06 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 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
封装一个PDO数据库操作类代码
2009/09/09 PHP
浅析is_writable的php实现
2013/06/18 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
javascript some()函数用法详解
2014/11/13 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
超级退弹代码
2008/07/07 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
VUE前后端学习tab写法实例
2019/08/06 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python机器学习之随机森林(七)
2018/03/26 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
关于Python解包知识点总结
2020/05/05 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
自我推荐书
2013/12/04 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
高中生学习计划书
2014/09/15 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
旷课检讨书范文
2015/01/27 职场文书
2015年党小组工作总结
2015/05/26 职场文书