jQuery 애니메이션 팝 업 창 은 다양한 표현 방식 을 지원 합 니 다.

애니메이션 효 과 는 어느 대상 에서 촉발 되 는 지,즉 이 대상 부터 점차적으로 화면 중간 으로 이동 하고 점차적으로 전개 되 며 전개 되면 안의 디 스 플레이 대상 은 위 에서 아래로 천천히 전개 된다.닫 기 를 누 르 면 펼 쳐 진 대상 을 천천히 줄 인 다음 트리거 대상 위로 천천히 이동 합 니 다.말 이 좀 꼬 여서 나 자신 도 무슨 뜻 인지 모 르 겠 지만,말하자면 어디에서 왔 다 갔다 하 는 것 이다.표현 방식 의 첫 번 째:string 은 가장 간단 하고 명료 한 방식 입 니 다.더 말 할 필요 도 없 이 문자열 을 직접 할당 하고 표시 하 는 것 입 니 다.두 번 째:ajax 는 ajax 를 지원 하 는 표현 으로 비동기 적 으로 데 이 터 를 가 져 와 보 여 주 는 것 입 니 다.세 번 째:iframe 은 말 그대로 iframe 디 스 플레이 를 지원 합 니 다.네 번 째:controls 라 는 이름 은 이해 하기 어렵 습 니 다.바로 페이지 의 한 대상 을 보 여 주 는 것 입 니 다.예 를 들 어:document.getElement ById("showName");플러그 인 코드 구현

 
(function($){ 
$.alerts = { 
alert : function(o,options){ 
var defaults = { 
title : '  ', 
content : '  ', 
GetType : 'string', //controls,ajax,string,iframe 
IsDrag : true, 
Url : '', 
Data : null, 
width:400, 
height:300, 
callback : function(){} 
} 
var options = $.extend(defaults,options); 
if(!$("#window")[0]) 
{ 
$.alerts._createObject(); 
} 
var position = $.alerts._getPosition(o); 
var winPosition = $.alerts._getWindowPosition(options); 
$("#windowContent").hide(); 
$("#window").css( 
{ 
width:position.w, 
height:position.h, 
top:position.t, 
left:position.l, 
zIndex:1001 
} 
); 
$("#windowBottom,#windowBottomContent").css( 
{ 
height:options.height-30 
} 
); 
$("#windowContent").css( 
{ 
height:options.height - 45, 
width:options.width - 25 
} 
); 
$("#windowTopContent").html(options.title); 
switch(options.GetType){ 
case "string": 
$("#windowContent").html(options.content); 
break; 
case "ajax": 
if(options.Url == ''){ 
alert("AjaxUrl    "); 
return; 
}else{ 
$.ajax( 
{ 
type: "POST", 
url: options.Url, 
data: options.Data, 
success: function(msg){ 
$("#windowContent").html(msg); 
} 
} 
); 
} 
break; 
case "controls": 
$("#windowContent").html(options.content.innerHTML); 
break; 
case "iframe": 
$("#windowContent").empty(); 
$("<iframe>").attr( 
{ 
src : options.Url, 
width:options.width, 
height:options.height 
} 
).appendTo("#windowContent"); 
break; 
} 
$("#window").animate( 
{ 
left:winPosition.l, 
top:winPosition.t, 
height:winPosition.h, 
width:winPosition.w 
},500,function(){ 
//$("#windowContent").fadeIn('slow'); 
$("#windowContent").slideDown(600); 
if($("#middleElement_bgDiv").get().length == 0){ 
$("<div>").attr("id","middleElement_bgDiv").css( 
{ 
position:"absolute", 
left:"0px", 
top:"0px", 
width:$(window).width()+"px", 
height:Math.max($("body").height(),$(window).height())+"px", 
filter:"Alpha(Opacity=40)", 
opacity:"0.4", 
backgroundColor:"#AAAAAA", 
zIndex:"1000", 
margin:"0px", 
padding:"0px" 
} 
).appendTo("body"); 
}else{ 
$("#middleElement_bgDiv").show(); 
} 
} 
); 
$("#windowClose").one("click",function(){ 
$("#windowContent").slideUp(600,function(){ 
$("#window").animate( 
{ 
left:position.l, 
top:position.t, 
height:position.h, 
width:position.w 
},500,function(){ 
$(this).hide(); 
if($("#middleElement_bgDiv").get().length > 0){ 
$("#middleElement_bgDiv").hide(); 
} 
$("#window").css( 
{ 
left:winPosition.l, 
top:winPosition.t, 
height:winPosition.h, 
width:winPosition.w 
} 
); 
} 
); 
}) 
}); 
$("#windowTop").mousedown(function(){ 
$.alerts.Drag( 
document.getElementById("window"), 
{ 
e : event, 
Drag : options.IsDrag 
} 
); 
}); 
}, 
_createObject : function(){ 
$("<div id=\"window\">"+ 
"<div id=\"windowTop\">"+ 
"<div id=\"windowTopContent\">Window example</div>"+ 
"<img src=\"images/window_min.jpg\" id=\"windowMin\" />"+ 
"<img src=\"images/window_max.jpg\" id=\"windowMax\" />"+ 
"<img src=\"images/window_close.jpg\" id=\"windowClose\" />"+ 
"</div>"+ 
"<div id=\"windowBottom\"><div id=\"windowBottomContent\">&nbsp;</div></div>"+ 
"<div id=\"windowContent\"></div>"+ 
"<img src=\"images/window_resize.gif\" id=\"windowResize\" />"+ 
"</div>").appendTo("body"); 
}, 
_getWindowPosition : function(options){ 
var wPosition = $.alerts._getPosition("#window"); 
var windowPosition = {}; 
windowPosition.t = parseInt($(window).height()/6)+parseInt($(window).scrollTop()); 
windowPosition.l = ($(window).width()+$(window).scrollLeft())/2 - options.width/2; 
windowPosition.w = options.width; 
windowPosition.h = options.height; 
return windowPosition; 
}, 
_getPosition : function(o){ 
var top = $(o).offset().top; 
var left = $(o).offset().left; 
var height = $(o).height(); 
var width = $(o).width(); 
return {t:top,l:left,h:height,w:width}; 
}, 
Drag : function(obj,options){ 
var e = options.e || window.event; 
var Drag = options.Drag; 
if(Drag == false)return; 
var x=parseInt(obj.style.left); 
var y=parseInt(obj.style.top); 
var x_=e.clientX-x; 
var y_=e.clientY-y; 
if(document.addEventListener){ 
document.addEventListener('mousemove', inFmove, true); 
document.addEventListener('mouseup', inFup, true); 
} else if(document.attachEvent){ 
document.attachEvent('onmousemove', inFmove); 
document.attachEvent('onmouseup', inFup); 
} 
inFstop(e); 
inFabort(e); 
function inFmove(e){ 
var evt; 
if(!e)e=window.event; 
obj.style.left=e.clientX-x_+'px'; 
obj.style.top=e.clientY-y_+'px'; 
inFstop(e); 
} 
function inFup(e){ 
var evt; 
if(!e)e=window.event; 
if(document.removeEventListener){ 
document.removeEventListener('mousemove', inFmove, true); 
document.removeEventListener('mouseup', inFup, true); 
} else if(document.detachEvent){ 
document.detachEvent('onmousemove', inFmove); 
document.detachEvent('onmouseup', inFup); 
} 
inFstop(e); 
} 
function inFstop(e){ 
if(e.stopPropagation) return e.stopPropagation(); 
else return e.cancelBubble=true; 
} 
function inFabort(e){ 
if(e.preventDefault) return e.preventDefault(); 
else return e.returnValue=false; 
} 
} 
} 
JAlert = function(o,json){ 
$.alerts.alert(o,json); 
}; 
})(jQuery); 

호출 코드

 
$(function(){ 
$("a").each(function(){ 
$(this).bind("click",function(){ 
JAlert(this,{ 
title : '    ', 
content : $("#msg")[0].outerHTML, 
GetType : 'string', //controls,ajax,string,iframe 
IsDrag : true, 
Url : "windows.html", 
Data : null, 
width:300, 
height:200 
}); 
}); 
}); 
}); 

사용 설명:title:창 제목 content:GetType 속성 에 달 려 있 습 니 다.GetType='string'이 라면 content 는 표시 할 내용 입 니 다.GetType='controls'이 라면 content 는 표시 할 DOM 대상 입 니 다.다른 두 가지 유형 은 기입 할 필요 가 없다.GetType:보 여 주 는 네 가지 유형:string,iframe,ajax,controls IsDrag:드래그 Url 을 지원 하 는 지 여 부 는 GetType 속성 에 달 려 있 습 니 다.GetType='ajax'라면 Url 은 요청 한 URL 주소 입 니 다.GetType='iframe'이면 URL 은 iframe 의 링크 주소 입 니 다.다른 두 가지 유형 은 Data:GetType='ajax'를 입력 하지 않 아 도 됩 니 다.Data 속성 은 요청 한 데이터 입 니 다.width:디 스 플레이 층 의 너비 height:디 스 플레이 층 의 높이 HTML 코드

 
<body> 
<a href="javascript:void(0);" id="windowOpen1">Open window</a> 
<a href="javascript:void(0);" id="windowOpen2">Open window</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<a href="javascript:void(0);" id="windowOpen3">Open window</a> 
<div id="msg" style="font-size:16px;padding-top:16px;line-height:25px;">&nbsp;&nbsp;&nbsp;&nbsp;    《<a href="http://jb51.net" target="_blank">  </a>》   ,             ，         ！<br/><br/>  ：http://jb51.net</div> 
</body> 

패키지 다운로드 주소