봉인된 원본 자바스크립트 팝업 층 코드

 
  
// <![CDATA[ 
  <br>/* @author: hongru.chen 
  <br>** @date: 2010-09-15 
  <br>** @vision: 1.1 
  <br>*/ 
  <br>var Hongru = {}; 
  <br>function $(id){return document.getElementById(id)} 
  <br>Object.prototype.extend = function(target, /*optional*/source, /*optional*/deep) { 
  <br>target = target || {}; 
  <br>var sType = typeof source, i = 1, options; 
  <br>if( sType === 'undefined' || sType === 'boolean' ) { 
  <br>deep = sType === 'boolean' ? source : false; 
  <br>source = target; 
  <br>target = this; 
  <br>} 
  <br>if( typeof source !== 'object' && Object.prototype.toString.call(source).call(source) !== '[object Function]' ) 
  <br>source = {}; 
  <br> 
  <br>while(i <= 2) { 
  <br>options = i === 1 ? target : source; 
  <br>if( options != null ) { 
  <br>for( var name in options ) { 
  <br>var src = target[name], copy = options[name]; 
  <br>if(target === copy) 
  <br>continue; 
  <br>if(deep && copy && typeof copy === 'object' && !copy.nodeType) 
  <br>target[name] = this.extend(src || 
  <br>(copy.length != null ? [] : {}), copy, deep); 
  <br>else if(copy !== undefined) 
  <br>target[name] = copy; 
  <br>} 
  <br>} 
  <br>i++; 
  <br>} 
  <br>return target; 
  <br>}; 
  <br>isFunction = function( fn ) { 
  <br>return !!fn && typeof fn != "string" && !fn.nodeName && 
  <br>fn.constructor != Array && /^[\s[]?function/.test( fn + "" ); 
  <br>} 
  <br>Hongru.box = function(){ 
  <br>var box,mask,content,_content,_height,_width,isPreload,flag = false; 
  <br> 
  <br>return{ 
  <br>open:function(con,options){ 
  <br>//default options 
  <br>var defaultOptions = { 
  <br>width:300, 
  <br>height:200, 
  <br>isPre:true, 
  <br>time:0, 
  <br>title:'   ', 
  <br>isBar:true, 
  <br>isShut:true 
  <br>}; 
  <br>options = options?options:{}; 
  <br>options = Object.extend(defaultOptions,options); 
  <br> 
  <br>if(!flag){ 
  <br>box = document.createElement('div');box.id = "popup-box"; 
  <br>box.style.cssText = "position:absolute; display:none; background:#fff url(preload.gif) no-repeat 50% 50%; border:5px solid #ccc; z-index:2000"; 
  <br>mask = document.createElement('div');mask.id = "popup-mask"; 
  <br>mask.style.cssText = "position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500"; 
  <br>content = document.createElement('div');content.id = "popup-content"; 
  <br>content.style.cssText = "background:#fff"; 
  <br>bar = document.createElement('div'); bar.id = "popup-bar"; 
  <br>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"; 
  <br>wrapTit = document.createElement('div'); wrapTit.id = "wrap-tit"; 
  <br>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;"; 
  <br>tit = document.createElement('span'); tit.id = "popup-tit"; 
  <br>tit.style.cssText = "cursor:text;margin-left:10px;position:relative;color:#333;font-size:84%" 
  <br> 
  <br>shut = document.createElement('a'); shut.id = "popup-shut"; 
  <br>shut.innerHTML = '×'; 
  <br>shut.style.cssText = "color:#34538B;cursor:pointer;font-family:Tahoma;font-weight:bold;position:absolute;top:0px;right:10px;text-decoration:none;"; 
  <br>document.body.appendChild(mask); document.body.appendChild(box); box.appendChild(bar); box.appendChild(content); bar.appendChild(wrapTit); bar.appendChild(shut); wrapTit.appendChild(tit); 
  <br>mask.onclick = shut.onclick = Hongru.box.hide; 
  <br>//bar.onclick = function(){alert($('sure').id)} 
  <br> 
  <br>window.onresize = Hongru.box.resize; 
  <br>flag = true; 
  <br>}tit.innerHTML = options.title; 
  <br>options.isShut?shut.style.display = '':shut.style.display = 'none'; 
  <br>options.isBar?bar.style.display = '':bar.style.display = 'none'; 
  <br>if(!options.isPre){ 
  <br>box.style.width = options.width?options.width+'px':'auto'; 
  <br>box.style.height = options.height?options.height+'px':'auto'; 
  <br>box.style.backgroundImage = 'none'; 
  <br>content.innerHTML = con; 
  <br>} 
  <br>else{ 
  <br>content.style.display = 'none'; 
  <br>box.style.width = box.style.height = '100px'; 
  <br>} 
  <br>this.mask(); 
  <br>this.alpha(mask,1,50); 
  <br>_content = con; _height = options.height; _width = options.width; isPreload = options.isPre; 
  <br>if(options.time){ 
  <br>setTimeout(function(){Hongru.box.hide()},1000*options.time); 
  <br>} 
  <br>}, 
  <br> 
  <br>fill:function(con,options){ 
  <br>if(options.isPre){ 
  <br>if(!options.width || !options.height){ 
  <br>var autoWidth = box.style.width, autoHeight = box.style.height; 
  <br>content.innerHTML = con; 
  <br>box.style.width = options.width?options.width+'px':''; 
  <br>box.style.height = options.height?options.height+'px':''; 
  <br>content.style.display = ''; 
  <br>options.width = parseInt(box.offsetWidth-10); 
  <br>options.height = parseInt(box.offsetHeight-10); 
  <br>content.style.display = 'none'; 
  <br>box.style.width = autoWidth; 
  <br>box.style.height = autoHeight; 
  <br>} 
  <br>else{ 
  <br>content.innerHTML = con; 
  <br> 
  <br>} 
  <br>this.size(box,options.width,options.height); 
  <br>} 
  <br>else{ 
  <br>box.style.backgroundImage = 'none'; 
  <br>} 
  <br>}, 
  <br> 
  <br>hide:function(){ 
  <br>Hongru.box.alpha(box,-1,0); 
  <br>}, 
  <br> 
  <br>resize:function(){ 
  <br>Hongru.box.pos(); 
  <br>Hongru.box.mask(); 
  <br>}, 
  <br> 
  <br>mask:function(){ 
  <br>mask.style.height = Hongru.page.total(1)+'px'; 
  <br>mask.style.width=''; mask.style.width = Hongru.page.total(0)+'px'; 
  <br>}, 
  <br> 
  <br>pos:function(){ 
  <br>var minTop = (Hongru.page.height()/2)-(box.offsetHeight/2); minTop = minTop<10?10:minTop; 
  <br>box.style.top=(minTop+Hongru.page.top())+'px'; 
  <br>box.style.left=(Hongru.page.width()/2)-(box.offsetWidth/2)+'px'; 
  <br>}, 
  <br> 
  <br>alpha:function(obj,direction,destination){ 
  <br>clearInterval(obj.animing); 
  <br>if(direction == 1){ 
  <br>obj.style.opacity=0; obj.style.filter='alpha(opacity=0)'; 
  <br>obj.style.display='block'; this.pos(); 
  <br>} 
  <br>obj.animing = setInterval(function(){Hongru.box.alphaAnim(obj,destination,direction)},50); 
  <br>}, 
  <br> 
  <br>alphaAnim:function(obj,destination,direction){ 
  <br>var opacity = Math.round(obj.style.opacity*100); 
  <br>if(opacity == destination){ 
  <br>clearInterval(obj.animing); 
  <br>if(direction == -1){ 
  <br>obj.style.display='none'; 
  <br>obj == box?Hongru.box.alpha(mask,-1,0):content.innerHTML=box.style.backgroundImage=''; 
  <br>}else{ 
  <br>curOptions = {width:_width,height:_height,isPre:isPreload} 
  <br>obj == mask?this.alpha(box,1,100):Hongru.box.fill(_content,curOptions); 
  <br>} 
  <br>}else{ 
  <br>var n=Math.ceil((opacity+((destination-opacity)*.5))); n=n==1?0:n; 
  <br>obj.style.opacity=n/100; 
  <br>obj.style.filter='alpha(opacity='+n+')'; 
  <br>} 
  <br>}, 
  <br> 
  <br>size:function(obj,width,height){ 
  <br>obj = typeof obj == 'object' ? obj : $(obj); 
  <br>clearInterval(obj.sizing); 
  <br>var offsetW = obj.offsetWidth, offsetH = obj.offsetHeight, 
  <br>otherW = offsetW-parseInt(obj.style.width), otherH = offsetH-parseInt(obj.style.height); 
  <br>var wFlag = (offsetW-otherW>width)?0:1, hFlag = (offsetH-otherH>height)?0:1; 
  <br>obj.sizing = setInterval(function(){Hongru.box.sizeAnim(obj,width,otherW,wFlag,height,otherH,hFlag)},20); 
  <br>}, 
  <br> 
  <br>sizeAnim:function(obj,width,otherW,wFlag,height,otherH,hFlag){ 
  <br>var objW = obj.offsetWidth-otherW, objH = obj.offsetHeight-otherH; 
  <br>if(objW == width && objH == height){ 
  <br>clearInterval(obj.sizing); 
  <br>box.style.backgroundImage='none'; 
  <br>content.style.display='block'; 
  <br>}else{ 
  <br>if(objW!=width){ 
  <br>var n = objW+((width-objW)*.5); 
  <br>obj.style.width = wFlag?Math.ceil(n)+'px':Math.floor(n)+'px'; 
  <br>} 
  <br>if(objH!=height){ 
  <br>var n = objH+((height-objH)*.5); 
  <br>obj.style.height = hFlag?Math.ceil(n)+'px':Math.floor(n)+'px'; 
  <br>} 
  <br>this.pos(); 
  <br> 
  <br>} 
  <br>}, 
  <br> 
  <br>ask:function(message,options,sureCall,cancelCall){ 
  <br>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>'; 
  <br>Hongru.box.open(elements,options); 
  <br> 
  <br>function delay(){//   
  <br>if(($('sure-btn') && $('cancel-btn')) != null){ 
  <br>clearInterval(checkComplete); 
  <br>//alert('yes'); 
  <br>$('sure-btn').onclick = function(){ 
  <br>if(isFunction(sureCall)){sureCall.call(this);} 
  <br>} 
  <br>$('cancel-btn').onclick = function(){ 
  <br>if(isFunction(cancelCall)){cancelCall.call(this);} 
  <br>Hongru.box.hide(); 
  <br>} 
  <br>}} 
  <br>var checkComplete = setInterval(delay,100); 
  <br>} 
  <br>} 
  <br>}(); 
  <br>Hongru.page=function(){ 
  <br>return{ 
  <br>top:function(){return document.documentElement.scrollTop||document.body.scrollTop}, 
  <br>width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth}, 
  <br>height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}, 
  <br>total:function(d){ 
  <br>var b=document.body, e=document.documentElement; 
  <br>return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)): 
  <br>Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth)) 
  <br>} 
  <br>} 
  <br>}(); 
  <br>// ]]> 
  
 
 

옵션을 설정하지 않은 box (기본 높이 200px, 너비 300px)
보통 높이 박스
넓다
미리 불러오는 애니메이션이 없는 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 //        
  
} 
  
 
 

다른 홍루.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(); 
  
} 
  
}, 
  
 
 

자, 쓸데없는 말 그만하고 원본 파일 패키지 다운로드 첨부: 여기 세게 클릭
괜찮다면 아래의 추천을 받아 주십시오