jquery implementation of the live pop-up layer code _jquery

Copy Code code as follows:

/*
Popup window navigates to the middle of the browser
1. Show (options{
Height: Altitude
Width: Breadth
Speed: Fade time default 0
Container: jquery object containing HTML content
Model: Whether modal window, default True, modal dialog box is in the layer under the cover mask layer, reference to the article overlay implementation
})
2. Close (Speed: Fade out time default 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++; Increase without ejecting one time to prevent multiple 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 here is controlled by JS, and here are a few common dialog boxes implemented with the panel in this play

Copy Code code as follows:

/* Bounce definition hidden box
<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);
};
/* pop-up window, loading form HTML fragment from 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, 3 seconds to automatically fade * *
Q.tips = function (msg) {
var html = ' <div class= ' gu_layer w330 ' > ' +
' <div class= ' gu_layer_main ' > ' +
' ' <p class= ' gu_layer_txt ' > ' + msg + ' </p> ' +
' <div class= ' gu_layer_btn ' ></div> ' +
' </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 ' > ' +
"' <p class= ' gu_layer_txt ' > ' + msg + ' </p> ' +
' <div class= ' gu_layer_btn ' ><a class= ' btn_org ' href= ' ' > OK </a></div> ' +
' </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 ()});
};
/* Confirm box Cancel callback is optional * *
q.confirm = function (title, MSG, yes, cancel) {
var html = ' <div class= ' gu_layer w330 ' > ' +
' <div class= ' gu_layer_main ' > ' +
"' <p class= ' gu_layer_txt ' > ' + msg + ' </p> ' +
' <div class= ' gu_layer_btn "><a class=" btn_org "href=" "> OK </a><a class=" Btn_gray "" > Cancel </a></div> ' +
' </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 ()});
};