Sample Code of the jquery pop-up Layer Effect (1/2)

This is an example code that provides two jquery pop-up layer effects. If you are looking for the jquery pop-up layer code, please download it, if you like jquery, let's take a look at the differences between this pop-up layer and the js pop-up layer.

This is an example code that provides two jquery pop-up layer effects. If you are lookingJquery pop-up Layer CodeLet's download it. If you like to use jquery, let's take a look at the differences between this pop-up layer and the js pop-up layer.

Js Code

 

/* 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 tutorial = 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 ()});
};

1 2