封裝的原生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();
}
},

好了，廢話不多說了，附上源檔案打包下載：狠狠點擊這裡
如果覺得不錯，請移駕點下 下面 的推薦