Encapsulated native javascript pop-up layer code_layout and layer

Copy code The code is as follows:

';
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 //Customized, pop-up layer body (except the width of the border and title bar), adaptive when it is 0.
height:200//Customized, pop-up layer body (except the height of the border and title bar), adaptive when it is 0.
isPre:1 //true or false, whether there is a preloaded background image,
time:0 //Delay automatic closing time, in seconds, not triggered at 0
title:'' //Automatically Define title
isBar:1 //true or false, whether there is a title bar
isShut:1 //whether there is a close button
}

Another Hongru.box.ask( con, options, surecall, cancelcall) is a prompt box with a button. The first two parameters of the callback function are the same as above, and the last two parameters are the callback functions of 'confirm' and 'cancel' respectively
which adds transparency gradient and size. Gradient, transparency gradient main function is as follows:

Copy code The code is as follows:

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

The box size gradient function body is as follows:

Copy code The code is as follows:

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

Okay, no more nonsense, attach the source file for package download: Click here
If you think it is good, please click below Recommendation