（原创）封装的原生弹出层一

刚刚在博客园开通博客，试了一下，还不错，比我之前那个自己买的空间快多了，（主要是那个虚拟主机商太狗血了，辛苦做了一年的博客就这样被他扼杀了...恨啊），所以还是来这边第三方博客写东西吧。。。

最近抽空余的时间写了个弹出层的插件，功能不算强大，当练手，以下为示例：

不设任何options参数的box（默认高200px，宽300px）

普通设定高宽的box

高宽自适应内容高宽的box

不带预载动画的box

延迟自动消失的box

title自定义的box

不带标题栏的的box

不带标题栏关闭按钮的box

带按钮和回调参数的box

调用 Hongru.box.open(con,options)函数，参数con为弹出层主要内容，可以是html代码。options为一个object，可选参数目前有
{
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)为带按钮的提示框，带回调函数前两个参数同上，后两个参数分别为‘确认’和‘取消’的回调函数

其中加入了透明度渐变和大小渐变，透明度渐变主体函数如下：

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,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大小渐变函数体如下：

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();
				
			}
		},

好了，废话不多说了，附上源文件打包下载：狠狠点击这里

如果觉得不错，请移驾点下 下面 的推荐