封装的原生javascript弹出层代码

复制代码 代码如下:

不设任何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();
}
},

好了，废话不多说了，附上源文件打包下载： 狠狠点击这里
如果觉得不错，请移驾点下 下面 的推荐