JQuery animation pop-up forms support multiple display modes _ jquery

The jQuery animation pop-up form just written today supports four display modes: string, Ajax, iframe, and controls. The details are as follows.
Animation Effect
From which the object is triggered, that is, the object is gradually moved to the center of the screen and gradually expanded. The displayed object is then expanded from top to bottom. When you click Close, scale back the displayed object and move it to the trigger object.
I don't know what it means. To put it bluntly, it means where to go back and forth.
Display Mode
First: string
This is the simplest and most clear method. Needless to say, it is to directly assign values to strings and display them.
Type 2: ajax
In this way, ajax is supported, that is, data is obtained asynchronously and displayed.
Third: iframe
As the name implies, nested iframe display is supported.
Type 4: controls
This name is not easy to understand. It is to display an object on the page. For example, document. getElementById ("showName ");
Plug-in code implementation

The Code is as follows:

(Function ($ ){
$. Alerts = {
Alert: function (o, options ){
Var defaults = {
Title: 'title ',
Content: '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" cmd.css (
{
Width: position. w,
Height: position. h,
Top: position. t,
Left: position. l,
ZIndex: 1001
}
);
$ ("# WindowBottom, # windowBottomContent" ).css (
{
Height: options. height-30
}
);
$ ("# WindowContent" cmd.css (
{
Height: options. height-45,
Width: options. width-25
}
);
$ ("# WindowTopContent" pai.html (options. title );
Switch (options. GetType ){
Case "string ":
$ ("# WindowContent" pai.html (options. content );
Break;
Case "ajax ":
If (options. Url = ''){
Alert ("AjaxUrl cannot be blank ");
Return;
} Else {
$. Ajax (
{
Type: "POST ",
Url: options. Url,
Data: options. Data,
Success: function (msg ){
$ ("# WindowContent" cmd.html (msg );
}
}
);
}
Break;
Case "controls ":
$ ("# WindowContent" cmd.html (options. content. innerHTML );
Break;
Case "iframe ":
$ ("# WindowContent"). empty ();
$ (""). Attr (<BR >{< BR> src: options. url, <BR> width: options. width, <BR> height: options. height <BR >}< BR> ). appendTo ("# windowContent"); <BR> break; <BR >}< BR >$ ("# window "). animate (<BR >{< BR> left: winPosition. l, <BR> top: winPosition. t, <BR> height: winPosition. h, <BR> width: winPosition. w <BR >}, 500, function () {<BR> // $ ("# windowContent "). fadeIn ('low'); <BR >$ ("# windowContent "). slideDown (600); <BR> if ($ ("# middleEleme Nt_bgDiv "). get (). length = 0) {<BR >$ ("<p> "). attr ("id", "middleElement_bgDiv" ).css (<BR >{< BR> position: "absolute", <BR> left: "0px", <BR> top: "0px", <BR> width: $ (window ). width () + "px", <BR> height: Math. max ($ ("body "). height (), $ (window ). height () + "px", <BR> filter: "Alpha (Opacity = 40)", <BR> opacity: "0.4", <BR> backgroundColor: "# AAAAAA", <BR> zIndex: "1000", <BR> margin: "0px", <BR> padding: "0px" <BR >}< BR> ). appendTo ("Body"); <BR >}else {<BR >$ ("# middleElement_bgDiv "). show (); <BR >}< BR>); <BR >$ ("# windowClose "). one ("click", function () {<BR >$ ("# windowContent "). slideUp (600, function () {<BR> $ ("# window "). animate (<BR >{< BR> left: position. l, <BR> top: position. t, <BR> height: position. h, <BR> width: position. w <BR >}, 500, function () {<BR> $ (this ). hide (); <BR> if ($ ("# middleElement_bgDiv "). get (). length> 0) {<BR >$ ("# middleEle Ment_bgDiv "). hide (); <BR >}< BR >$ ("# window" ).css (<BR >{< BR> left: winPosition. l, <BR> top: winPosition. t, <BR> height: winPosition. h, <BR> width: winPosition. w <BR >}< BR>); <BR> }); <BR> $ ("# windowTop "). mousedown (function () {<BR> $. alerts. drag (<BR> document. getElementById ("window"), <BR >{< BR> e: event, <BR> Drag: options. isDrag <BR >}< BR>); <BR >}); <BR >}, <BR> _ createObject: function (){ <BR> $ ("<p id = \" window \ ">" + <BR> "<p id = \" windowTop \ ">" + <BR> "<p id = \ "windowTopContent \"> Window example </p> "+ <BR>" + <BR> "</ p> "+ <BR>" <p id = \ "windowBottom \"> <p id = \ "windowBottomContent \"> </p> "+ <BR> "<p id = \" windowContent \ "> </p>" + <BR> "" + <BR> "</p> "). appendTo ("body"); <BR >}, <BR> _ getWindowPosition: function (options) {<BR> var wPosition = $. alerts. _ getPosition ("# window"); <BR> var WindowPosition ={}; <BR> windowPosition. t = parseInt ($ (window ). height ()/6) + parseInt ($ (window ). scrollTop (); <BR> windowPosition. l = ($ (window ). width () + $ (window ). scrollLeft ()/2-options. width/2; <BR> windowPosition. w = options. width; <BR> windowPosition. h = options. height; <BR> return windowPosition; <BR >}, <BR> _ getPosition: function (o) {<BR> var top = $ (o ). offset (). top; <BR> var left = $ (o ). offset (). Left; <BR> var height = $ (o ). height (); <BR> var width = $ (o ). width (); <BR> return {t: top, l: left, h: height, w: width };< BR >}, <BR> Drag: function (obj, options) {<BR> var e = options. e | window. event; <BR> var Drag = options. drag; <BR> if (Drag = false) return; <BR> var x = parseInt (obj. style. left); <BR> var y = parseInt (obj. style. top); <BR> var x _ = e. clientX-x; <BR> var y _ = e. clientY-y; <BR> if (document. addEventListen Er) {<BR> document. addEventListener ('mousemove ', inFmove, true); <BR> document. addEventListener ('mouseup', inFup, true); <BR >}else if (document. attachEvent) {<BR> document. attachEvent ('onmousemove ', inFmove); <BR> document. attachEvent ('onmouseup', inFup); <BR >}< BR> inFstop (e); <BR> inFabort (e); <BR> function inFmove (e) {<BR> var evt; <BR> if (! E) e = window. event; <BR> obj. style. left = e. clientX-x _ + 'px '; <BR> obj. style. top = e. clientY-y _ + 'px '; <BR> inFstop (e); <BR >}< BR> function inFup (e) {<BR> var evt; <BR> if (! E) e = window. event; <BR> if (document. removeEventListener) {<BR> document. removeEventListener ('mousemove ', inFmove, true); <BR> document. removeEventListener ('mouseup', inFup, true); <BR>} else if (document. detachEvent) {<BR> document. detachEvent ('onmousemove ', inFmove); <BR> document. detachEvent ('onmouseup', inFup); <BR >}< BR> inFstop (e); <BR >}< BR> function inFstop (e) {<BR> if (e. stopPropagation) return e. stop Propagation (); <BR> else return e. cancelBubble = true; <BR >}< BR> function inFabort (e) {<BR> if (e. preventDefault) return e. preventDefault (); <BR> else return e. returnValue = false; <BR >}< BR> JAlert = function (o, json) {<BR >$. alerts. alert (o, json); <BR >}; <BR >}) (jQuery ); <BR> </p> <BR> Call Code <BR> <p class = "codetitle"> <U> </U> the code is as follows: </p> <p class = "codebody" id = "code4195"> <BR >$ (function () {<BR >$ (""). ea Ch (function () {<BR> $ (this ). bind ("click", function () {<BR> JAlert (this, {<BR> title: 'prompt Form', <BR> content: $ ("# msg ") [0]. outerHTML, <BR> GetType: 'string', // controls, ajax, string, iframe <BR> IsDrag: true, <BR> Url: "windows.html ", <BR> Data: null, <BR> width: 300, <BR> height: 200 <BR> }); <BR >}); <BR> </p> <BR> usage: <BR> title: Form title <BR> content: Depends on the GetType attribute, if GetType = 'string', the content is Content. If GetType = 'controls', the content is the DOM object to be displayed. You do not need to enter the other two types. <BR> GetType: four types of display: string, iframe, ajax, and controls <BR> IsDrag: Drag/drop supported <BR> Url: also depends on the GetType attribute, if GetType = 'ajax ', the Url is the requested URL address. If GetType = 'iframe', the URL is the link address of iframe. <BR> Data is not required for the other two types: When GetType = 'ajax ', the Data attribute is the requested Data. <BR> width: Display layer width <BR> height: the height of the display layer <BR> HTML code <BR> <p class = "codetitle"> <U> </U> code is as follows: </p> <p class = "codebody" id = "code82169"> <BR> <body> <BR> Open window <br/> <br/> <br/>/> <br/>/> <br/>/> <br/> <BR> open window <BR> <P id = "msg" style = "font-size: 16px; padding-top: 16px; line-height: 25px;"> welcome to the script home website, I hope to discuss technical issues with you and share my dreams! <Br/> URL: http://jb51.net</p > <BR> </body> <BR> </p> <BR> package