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

时间：2010-09-21 来源：岑安

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

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

不设任何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时自适应。
//自定义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:_width,
                                }
                        }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();
                                
                        }
                },

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