jQuery 动画弹出窗体支持多种展现方式

动画效果

从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动，并逐渐展开，展开后里面的显示对象再从上到下慢慢展开。点击关闭时，先将展开的显示的对象慢慢缩回，然后再慢慢移到触发的对象上面。

说的有点绕，我自己都不明白是什么意思，说白了就是从哪儿来回哪儿去。

展现方式

第一种：string

这是最简单最明了的方式，不用多说，就是直接赋值字符串并显示出来。

第二种：ajax

这种是支持ajax的展现，就是异步获取数据并展示出来。

第三种: iframe

顾名思义就是支持嵌套iframe显示。

第四种：controls

这个名字有点不太好理解，就是将页面的某个对象展现出来。比如：document.getElementById("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\"> </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;">    欢迎访问《<a href="http://3water.com" target="_blank">三水点靠木</a>》的网站,希望与大家一起探讨技术问题，共同实现各自的梦想！<br/><br/>网址：http://3water.com</div> 
</body>

打包下载地址