封装的原生javascript弹出层代码
作者：
最近抽空余的时间写了个弹出层的插件，功能不算强大，当练手，以下为示例代码。
复制代码 代码如下:
<script type="text/javascript">// <![CDATA[
/* @author: hongru.chen
** @date: 2010-09-15
** @vision: 1.1
*/
var Hongru = {};
function $(id){return document.getElementById(id)}
Object.prototype.extend = function(target, /*optional*/source, /*optional*/deep) {
target = target || {};
var sType = typeof source, i = 1, options;
if( sType === 'undefined' || sType === 'boolean' ) {
deep = sType === 'boolean' ? source : false;
source = target;
target = this;
}
if( typeof source !== 'object' && Object.prototype.toString.call(source).call(source) !== '[object Function]' )
source = {};
while(i <= 2) {
options = i === 1 ? target : source;
if( options != null ) {
for( var name in options ) {
var src = target[name], copy = options[name];
if(target === copy)
continue;
if(deep && copy && typeof copy === 'object' && !copy.nodeType)
target[name] = this.extend(src ||
(copy.length != null ? [] : {}), copy, deep);
else if(copy !== undefined)
target[name] = copy;
}
}
i++;
}
return target;
};
isFunction = function( fn ) {
return !!fn && typeof fn != "string" && !fn.nodeName &&
fn.constructor != Array && /^[\s[]?function/.test( fn + "" );
}
Hongru.box = function(){
var box,mask,content,_content,_height,_width,isPreload,flag = false;
return{
open:function(con,options){
//default options
var defaultOptions = {
width:300,
height:200,
isPre:true,
time:0,
title:'对话框',
isBar:true,
isShut:true
};
options = options?options:{};
options = Object.extend(defaultOptions,options);
if(!flag){
box = document.createElement('div');box.id = "popup-box";
box.style.cssText = "position:absolute; display:none; background:#fff url(preload.gif) no-repeat 50% 50%; border:5px solid #ccc; z-index:2000";
mask = document.createElement('div');mask.id = "popup-mask";
mask.style.cssText = "position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500";
content = document.createElement('div');content.id = "popup-content";
content.style.cssText = "background:#fff";
bar = document.createElement('div'); bar.id = "popup-bar";
bar.style.cssText = "background:none repeat scroll 0 0 #F7F7F7;border-bottom:4px solid #EEEEEE;border-top:3px solid #F9F9F9;margin-top:2px;position:relative";
wrapTit = document.createElement('div'); wrapTit.id = "wrap-tit";
wrapTit.style.cssText = "background:none repeat scroll 0 0 #F3F3F3;border-bottom:5px solid #F1F1F1;border-top:4px solid #F5F5F5;line-height:5px;margin-top:3px;";
tit = document.createElement('span'); tit.id = "popup-tit";
tit.style.cssText = "cursor:text;margin-left:10px;position:relative;color:#333;font-size:84%"
shut = document.createElement('a'); shut.id = "popup-shut";
shut.innerHTML = '×';
shut.style.cssText = "color:#34538B;cursor:pointer;font-family:Tahoma;font-weight:bold;position:absolute;top:0px;right:10px;text-decoration:none;";
document.body.appendChild(mask); document.body.appendChild(box); box.appendChild(bar); box.appendChild(content); bar.appendChild(wrapTit); bar.appendChild(shut); wrapTit.appendChild(tit);
mask.onclick = shut.onclick = Hongru.box.hide;
//bar.onclick = function(){alert($('sure').id)}
window.onresize = Hongru.box.resize;
flag = true;
}tit.innerHTML = options.title;
options.isShut?shut.style.display = '':shut.style.display = 'none';
options.isBar?bar.style.display = '':bar.style.display = 'none';
if(!options.isPre){
box.style.width = options.width?options.width+'px':'auto';
box.style.height = options.height?options.height+'px':'auto';
box.style.backgroundImage = 'none';
content.innerHTML = con;
}
else{
content.style.display = 'none';
box.style.width = box.style.height = '100px';
}
this.mask();
this.alpha(mask,1,50);
_content = con; _height = options.height; _width = options.width; isPreload = options.isPre;
if(options.time){
setTimeout(function(){Hongru.box.hide()},1000*options.time);
}
},
fill:function(con,options){
if(options.isPre){
if(!options.width || !options.height){
var autoWidth = box.style.width, autoHeight = box.style.height;
content.innerHTML = con;
box.style.width = options.width?options.width+'px':'';
box.style.height = options.height?options.height+'px':'';
content.style.display = '';
options.width = parseInt(box.offsetWidth-10);
options.height = parseInt(box.offsetHeight-10);
content.style.display = 'none';
box.style.width = autoWidth;
box.style.height = autoHeight;
}
else{
content.innerHTML = con;
}
this.size(box,options.width,options.height);
}
else{
box.style.backgroundImage = 'none';
}
},
hide:function(){
Hongru.box.alpha(box,-1,0);
},
resize:function(){
Hongru.box.pos();
Hongru.box.mask();
},
mask:function(){
mask.style.height = Hongru.page.total(1)+'px';
mask.style.width=''; mask.style.width = Hongru.page.total(0)+'px';
},
pos:function(){
var minTop = (Hongru.page.height()/2)-(box.offsetHeight/2); minTop = minTop<10?10:minTop;
box.style.top=(minTop+Hongru.page.top())+'px';
box.style.left=(Hongru.page.width()/2)-(box.offsetWidth/2)+'px';
},
alpha:function(obj,direction,destination){
clearInterval(obj.animing);
if(direction == 1){
obj.style.opacity=0; obj.style.filter='alpha(opacity=0)';
obj.style.display='block'; this.pos();
}
obj.animing = setInterval(function(){Hongru.box.alphaAnim(obj,destination,direction)},50);
},
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+')';
}
},
size:function(obj,width,height){
obj = typeof obj == 'object' ? obj : $(obj);
clearInterval(obj.sizing);
var offsetW = obj.offsetWidth, offsetH = obj.offsetHeight,
otherW = offsetW-parseInt(obj.style.width), otherH = offsetH-parseInt(obj.style.height);
var wFlag = (offsetW-otherW>width)?0:1, hFlag = (offsetH-otherH>height)?0:1;
obj.sizing = setInterval(function(){Hongru.box.sizeAnim(obj,width,otherW,wFlag,height,otherH,hFlag)},20);
},
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();
}
},
ask:function(message,options,sureCall,cancelCall){
var elements = '<div class="wrap-remind" style="text-align:center">'+message+'<p><button id="sure-btn" class="sure-btn">确认</button> <button id="cancel-btn" class="cancel-btn">取消</button></p></div>';
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))
}
}
}();
// ]]></script>
不设任何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();
}
},
好了，废话不多说了，附上源文件打包下载：狠狠点击这里
如果觉得不错，请移驾点下 下面 的推荐