JQuery animation pop-up forms support multiple display modes

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
Copy codeThe 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 ();
$ ("<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 ('low ');
$ ("# 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 ",
Z index: "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" cmd.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 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 );

Call Code
Copy codeThe Code is as follows:
$ (Function (){
$ ("A"). each (function (){
$ (This). bind ("click", function (){
JAlert (this ,{
Title: 'prompt Form ',
Content: $ ("# msg") [0]. outerHTML,
GetType: 'string', // controls, ajax, string, iframe
IsDrag: true,
Url: "windows.html ",
Data: null,
Width: 300,
Height: 200
});
});
});
});

Instructions for use:
Title: Form title
Content: Depends on the GetType attribute. If GetType = 'string', content is the content to be displayed. If GetType = 'controls', content is the DOM object to be displayed. You do not need to enter the other two types.
GetType: Four display types: string, iframe, ajax, and controls
IsDrag: whether drag/drop is supported
Url: it 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. Do not enter the other two types
Data: When GetType = 'ajax ', the Data attribute is the requested Data.
Width: the width of the display layer.
Height: displays the height of the layer.
HTML code
Copy codeThe Code is as follows:
<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/>
<A href = "javascript: void (0);" id = "windowOpen3"> Open window </a>
<Div id = "msg" style = "font-size: 16px; padding-top: 16px; line-height: 25px; "> Welcome to the website of <a href =" http://jb51.net "target =" _ blank "> script house </a>. I hope to discuss technical issues with you, realize your dreams together! <Br/> Website: http://jb51.net </div>
</Body>

Package