您好,欢迎访问一九零五行业门户网

封装的原生javascript弹出层代码_布局与层

复制代码 代码如下:
';
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))
}
}
}();
// ]]>
不设任何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();
}
},
好了,废话不多说了,附上源文件打包下载:狠狠点击这里
如果觉得不错,请移驾点下 下面 的推荐
其它类似信息

推荐信息