Jquery implemented center pop-up Layer Code

Copy codeThe Code is as follows:
/*
The pop-up window is located in the middle of the browser
1. show (options {
Height: height
Width: width
Speed: the default fade-in time is 0.
Container: jquery object containing html content
Model: whether it is a modal window. The default value is true. The modal dialog box overwrites the mask layer under the bullet layer. For more information, see Overlay implementation in the previous article.
})
2. close (speed: the default fade-out time is 0)
*/
Q. Panel = function (){
Var self = this;
Self. _ resetPosition = function (){
Self._container.css ("top", self. _ getTop ());
Self._container.css ("left", self. _ getLeft ());
};
Self. _ getTop = function (){
Return Q. bom. scrollY () + (Q. bom. windowHeight ()-self. _ options. height)/2;
};
Self. _ getLeft = function (){
Return (Q. dom. pageWidth ()-self. _ options. width)/2;
};
Self. show = function (options ){
Self. _ options = $. extend ({
Width: 350,
Height: 200,
Opacity: 0.5,
Model: true,
Speed: 0
}, Options | {});
Self. _ container = self. _ options. container;
Var css = {
'Width': self. _ options. width,
'Height': self. _ options. height,
'Z-Index': Q. Overlay. zindex,
'Position': 'absolute ',
'Left': self. _ getLeft (),
'Top': self. _ getTop (),
'Display': 'none'
};
Self._container.css (css );
If (self. _ options. model ){
Self. _ overlay = new Q. Overlay (self. _ options. opacity );
Self. _ overlay. show ();
}
$ (Window). scroll (self. _ resetPosition );
$ (Window). resize (self. _ resetPosition );
$ (Document. body). append (self. _ container );
Self. _ container. fadeIn (self. _ options. speed );
Q. Overlay. zindex ++; // increases progressively when no pop-up occurs. This prevents multiple bullet layers from overlapping.
};
Self. close = function (speed ){
$ (Window). unbind ('resize', self. _ resetPosition );
$ (Window). unbind ('scroll ', self. _ resetPosition );
Self. _ container. fadeOut (speed | 0, function (){
Self. _ container. remove ();
If (self. _ options. model ){
Self. _ overlay. close ();
}
});
};
};

The center is controlled by js. Below are some general dialogs implemented by Panel in this play.
Copy codeThe Code is as follows:
/* The Custom hidden box is displayed.
<Div id = "league" style = "display: none">
<Button class = "close"> close </button>
</Div>
Q. showPanel ("league", function (panel, container ){
Container. find (". close"). click (function (){
Panel. close ();
}
);
*/
Q. showPanel = function (containerId, registerEventCallback ){
Var container = $ ("#" + containerId );
Var height = container. height ();
Var width = container. width ();
Container = container. clone (true );
Var options = {height: height, width: width, container: container };
Var panel = new Q. Panel ();
RegisterEventCallback (panel, container );
Panel. show (options );
};
/* In the pop-up window, load the html segment of the form from the url */
Q. openWindow = function (url, data, registerEventCallback ){
$. Get (url, data, function (html ){
Var panelDiv =$ (html );
PanelDiv. hide ();
$ (Document. body). append (panelDiv );
Var options = {height: panelDiv. height (), width: panelDiv. width (), container: panelDiv };
Var panel = new Q. Panel ();
RegisterEventCallback (panel, panelDiv );
Panel. show (options );
});
}
/* Prompt box, automatically fade out 3 seconds later */
Q. tips = function (msg ){
Var html = '<div class = "gu_layer w330">' +
'<Div class = "gu_layer_main">' +
'<H2> tip '<P class = "gu_layer_txt">' + msg + '</p>' +
'<Div class = "gu_layer_btn"> </div>' +
'</Div>'
Var container = $ (html );
Container. hide ();
$ (Document. body). append (container );
Var panel = new Q. Panel ();
Panel. show ({container: container, height: container. height (), width: container. width (), speed: 500 });
SetTimeout (function () {panel. close (500) ;}, 3000 );
};
/* Prompt box */
Q. alert = function (msg ){
Var html = '<div class = "gu_layer w330">' +
'<Div class = "gu_layer_main">' +
'<H2> <a class = "btn_tit_close" href = ""> close </a> prompt '<P class = "gu_layer_txt">' + msg + '</p>' +
'<Div class = "gu_layer_btn"> <a class = "btn_org" href = ""> confirm </a> </div>' +
'</Div>'
Var container = $ (html );
Container. hide ();
$ (Document. body). append (container );
Var panel = new Q. Panel ();
Container. find (". btn_tit_close"). click (function (){
Panel. close ();
Return false;
});
Container. find (". btn_org"). click (function (){
Panel. close ();
Return false;
});
Panel. show ({container: container, height: container. height (), width: container. width ()});
};
/* The cancel callback in the confirmation box is optional */
Q. confirm = function (title, msg, yes, cancel ){
Var html = '<div class = "gu_layer w330">' +
'<Div class = "gu_layer_main">' +
'<H2> <a class = "btn_tit_close" href = ""> close </a>' + title + ''<P class = "gu_layer_txt">' + msg + '</p>' +
'<Div class = "gu_layer_btn"> <a class = "btn_org" href = ""> confirm </a> <a class = "btn_gray" href = ""> obtain cancel </a> </div> '+
'</Div>'
Var container = $ (html );
Container. hide ();
$ (Document. body). append (container );
Var panel = new Q. Panel ();
Container. find (". btn_tit_close"). click (function (){
Panel. close ();
Return false;
});
Container. find (". btn_gray"). click (function (){
If (cancel)
Cancel ();
Panel. close ();
Return false;
});
Container. find (". btn_org"). click (function (){
If (yes)
Yes ();
Panel. close ();
Return false;
});
Panel. show ({container: container, height: container. height (), width: container. width ()});
};