Jquery implemented center pop-up Layer Code

CopyCode The 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. refer to the previous article. Article Overlay implementation
})
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 code The 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 </H2>' +
'<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 </H2> '+
'<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 + '</H2>' +
'<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 ()});
};