Jquery. Jwin. js jquery-based pop-up layer plug-in code

The Code is as follows:
Copy codeThe Code is as follows:
(Function ($ ){
Var imgdir = 'images/'; // path of the image folder
Var autoHide = false; // whether the floating div is automatically hidden
Var hideType = 'hide '; // optional parameters include hide, slide, and fade.
Var hideDelay = 0; // The time when the div hiding process is suspended
Var hideTime = 0; // The delay hiding time of the floating div
Var zIndex = 100; // when multiple divs obtain the focus, the div is at the top layer.
Var showType = 'show'; // optional parameters: hide, slide, and fade
Var showTime = 0; // the time used in the display process of the floating div
Var showDelay = 0; // The time when the div delay is displayed.
// The following two variables are used to ensure that the position where the div appears after it is dragged and hidden.
Var oldTop = ''; // Save the top
Var oldLeft = ''; // Save the left
$. Fn. extend ({
Jwin: function (option ){
Var op = $. extend ({
Id: '', // the id of the floating div (required)
Title: '', // title
Message: '', // display information
ElementId: '', // display the element id
Url: '', // The displayed page address
Width: 400, // The width of the floating div
Height: 300, // The height of the floating div
// Floating div display parameters
ShowType: 'show', // optional parameters of hide, slide, and fade are displayed in the floating div display mode.
ShowTime: 0, // The time used to display the suspended div
ShowDelay: 0, // display time of the suspended div Delay
// The Hidden parameters of the floating div
AutoHide: false, // whether the floating div is automatically hidden
HideType: 'hide ', // optional parameters include hide, slide, and fade.
HideTime: 0, // the time used in the hide process of the floating div
HideDelay: 0, // The floating div automatically hides the delay time.
}, Option );

If (op. id = ''){
Alert ("WinId missing ");
Return;
}

AutoHide = op. autoHide;
HideType = op. hideType;
HideDelay = op. hideDelay;
HideTime = op. hideTime;
ShowType = op. showType;
ShowTime = op. showTime;
ShowDelay = op. showDelay;
ZIndex = zIndex + 1;

Var winEle = $ ("#" + op. id );
If (winEle. length = 0 ){
This. width = parseInt (op. width );
This. height = parseInt (op. height );
Var banner = this. JwinCreatBanner (op. id, this. width, op. title );
OldTop = this. height> = document.doc umentElement. clientHeight? 0: (document.doc umentElement. clientHeight-this.height)/2;
OldLeft = this. width> = document. body. clientWidth? 0: (document. body. clientWidth-this.width)/2;

Win = $ ('<div id = "' + op. id + '"> </div> ');
Win.css ({'position': 'absolute ', 'top': oldTop, 'left': oldLeft, 'width' :( this. width + 2), 'zindex': zIndex, 'display': 'none '});
Win.html (banner );
Win. find ("# close"). bind ('click', function () {$ (this). JwinClose (op. id );});
Win. find ("# bannerMiddle"). bind ('mousedown', function () {$ (this). JwinMove (op. id );});

Var container = $ ('<div id = "' + op. id + '_ con"> </div> ');
Container.css ({'float': 'left', 'width': + this. width, 'height': this. height, 'word-break': 'break-all', 'overflow-x': 'did', 'overflow-y': 'auto', 'border ': '1px solid #1972e1 ', 'background-color':' # fff', 'clear': 'both '});

If (op. message. length> 0 ){
Container. append (op. message );
}
Else if (op. url. length> 0 ){
Var iframe = $ ('<iframe frameborder = "0"> </iframe> ');
Iframe.css ({'width': '000000', 'height': '000000', 'overflow': 'visible ', 'border': '0 '});
Iframe. attr ('src', op. url );
Container. append (iframe );
}
Else if (op. elementId. length> 0 ){
Var element = $ ("#" + op. elementId );
If (element ){
Container. append (element );
Element. show ();
}
}

Win. append (container );
$ (Document. body). append (win );
This. JwinShow (win );

// Whether to set automatic shutdown
If (autoHide ){
This. JwinHide (op. id );
}
}
Else {
WinEle.css ({'zindex' :( winEle.css ('zindex') + 2), 'top': oldTop, 'left': oldLeft });
This. JwinShow (winEle );
}
},

// Create a title
JwinCreatBanner: function (winId, width, title ){
Var bannerImddleWidth = width-47; // drag the div to the total width minus the width of the rounded corner on both sides, and close the button.
Var banner = '<div style = "folat: left; width:' + (width + 2) + '; clear: both; font-size: 14px; font: Arial, helvetica, sans-serif; color: # FFF; "> ';
Banner + = '<div style = "width: 14px; height: 30px; line-height: 30px; float: left; background: url('{imgdir}'windows_banner_left.gif) no-repeat; "> </div> ';
Banner + = '<div id = "bannerMiddle" style = "width:' + bannerImddleWidth + 'px; height: 30px; float: left; line-height: 30px; cursor: move; float: left; text-align: left; background: url('{imgdir}'windows_banner.gif) repeat-x; "> '+ title +' </div> ';
Banner + = '<div style = "width: 21px; height: 30px; line-height: 30px; float: left; background: url('{imgdir}'windows_banner.gif) repeat-x; "> </div> ';
Banner + = '<div style = "width: 14px; height: 30px; line-height: 30px; float: left; background: url('{imgdir}'windows_banner_right.gif) no-repeat; "> </div> ';
Banner + = '</div> ';
Return banner;
},

// Drag
JwinMove: function (winId ){
Var floatWin = document. getElementById (winId );
ZIndex = zIndex + 1;
FloatWin. style. zIndex = zIndex;
O = window. event. srcElement | specify your event.tar get;
Var d = document;
Var a = window. event;
Var x = a. layerX? A. layerX: a. offsetX;
Var y = a. layerY? A. layerY: a. offsetY;
If (o. setCapture ){
O. setCapture ();
}
Else if (window. captureEvents ){
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}

D. onmousemove = function (){
If (! A) a = window. event;
If (! A. pageX) a. pageX = a. clientX;
If (! A. pageY) a. pageY = a. clientY;
Var tx = a. pageX-x, ty = a. pageY-y;
Var maxx=document.doc umentElement. clientWidth-floatWin.clientWidth;
Var maxy=document.doc umentElement. clientHeight-floatWin.clientHeight;
Tx = (tx <0 )? 0: tx;
Ty = (ty <0 )? 0: ty;
Tx = (tx> maxx )? Maxx: tx;
Ty = (ty> maxy )? Maxy: ty;
FloatWin. style. left = tx;
FloatWin. style. top = ty;
};

D. onmouseup = function (){
If (o. releaseCapture ){
O. releaseCapture ();
}
Else if (window. captureEvents ){
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
D. onmousemove = null;
D. onmouseup = null;
};
},

// Display
JwinShow: function (win ){
Var t = showDelay;
Switch (showType ){
Case 'slide ':
SetTimeout (function () {win. slideDown (showTime) ;}, t );
Break;
Case 'fade ':
SetTimeout (function () {win. fadeIn (showTime) ;}, t );
Break;
Default:
SetTimeout (function () {win. show () ;}, t );
Break;
}
},

// Hide
JwinHide: function (winId, atonce ){
Var win = $ ("#" + winId );
Var t = atonce? 0: hideDelay;
Switch (hideType ){
Case 'slide ':
SetTimeout (function () {win. slideUp (hideTime) ;}, t );
Break;
Case 'fade ':
SetTimeout (function () {win. fadeOut (hideTime) ;}, t );
Break;
Default:
SetTimeout (function () {win. hide () ;}, t );
Break;
}
},

// Close
JwinClose: function (winId ){
This. JwinHide (winId, true );
}
});
}) (JQuery)