Jquery UI dialog | popup pop-up window layer

Jquery UI dialog | popup pop-up window layer

 

/***************************/
// @ Author: Adrian "yens" Mato gondelle
// @ Website: http://www.cnblogs.com/wangdetian168
// @ Email: wangdetian168@163.com
/***************************/
Document. write ('<Div id = "backgroundpopup"> </div> <Div id = "popupcontact" style = "display: none; position: fixed; _ Position: absolute; height: 384px; width: 408px; Background: # ffffff; Border: 2px solid # cecece; Z-index: 2; padding: 12px; font-size: 13px; "> <a id =" popupcontactclose "> x </a> <H1 id =" idmodaltitle "align =" right "> Document. Write ("<LINK rel = 'stylesheet 'type = 'text/CSS 'href}'general.css'> ");
// Setting up our popup
// 0 means disabled; 1 means enabled;
VaR popupstatus = 0;
VaR idcloses = new array ("popupcontactclose", "buttonclose ");

VaR popupmodal = '{idloadhtml: "popupcontact1", idmodaltitle: "pop-up window test", isusetitle: True, align: "center", modalwidth: "408px"; modalheight: "384px", show: function () {centerpopup (); // load popup loadpopup ();}}';
// Popupmodal = {idloadhtml: "popupcontact1", idmodaltitle: "pop-up window test", isusetitle: true };

// Loading popup with jquery magic!
Function loadpopup (){
// Loads popup only if it is disabled
If (popupstatus = 0 ){
$ ("# Backgroundpopup" Development .css ({
"Opacity": "0.7"
});
$ ("# Backgroundpopup"). fadein ("slow ");
$ ("# Popupcontact"). fadein ("slow ");
Popupstatus = 1;
}
}

// disabling popup with jquery magic!
function disablepopup () {
// disables popup only if it is enabled
If (popupstatus = 1) {
$ ("# backgroundpopup "). fadeout ("slow");
$ ("# popupcontact "). fadeout ("slow");
popupstatus = 0;
}< BR >}

// Centering popup
Function centerpopup (){
// Request data for centering
VaR export wwidth = document.doc umentelement. clientwidth;
VaR transport wheight = document.doc umentelement. clientheight;
VaR popupheight = $ ("# popupcontact"). Height ();
VaR popupwidth = $ ("# popupcontact"). Width ();
// Centering
$ ("# Popupcontact" ).css ({
"Position": "absolute ",
"TOP": Running wheight/2-popupheight/2,
"Left": expires wwidth/2-popupwidth/2
});
// Only need force for IE6
 
$ ("# Backgroundpopup" Development .css ({
"Height": windowheight
});
 
}

 

// Controlling events in jquery
$ (Document). Ready (function (){
// Pop-up layer
Popupmodal. Show = function (E)
{
Centerpopup ();
// Load popup
Loadpopup ();
}
// Whether the title is displayed
If (popupmodal. isusetitle ){
$ ("# Idmodaltitle" pai.html (popupmodal. idmodaltitle );
// Alert ($ ("# idmodaltitle"). ATTR ("align "));
$ ("# Idmodaltitle"). ATTR ("align", popupmodal. Align );
// Alert (popupmodal. Align); alert ($ ("# idmodaltitle"). ATTR ("align "));
}
Else {
$ ("# Idmodaltitle"). Hide ();
}
// Set the window size
Document. getelementbyid ("popupcontact"). style. width = popupmodal. modalwidth;
Document. getelementbyid ("popupcontact"). style. Height = popupmodal. modalheight;
$ ("# Idcontentarea" document. html (document. getelementbyid (popupmodal. idloadhtml). innerhtml );
// Loading popup
// Click the button event!
$ ("# Button"). Click (function (){
// Centering with CSS
Centerpopup ();
// Load popup
Loadpopup ();
});

// Closing popup
// Click the X event!

For (VAR I = 0; I <idcloses. length; I ++)
{
$ ("#" + Idcloses [I]). Click (function (){
Disablepopup ();
});
}

// Click out event!
$ ("# Backgroundpopup"). Click (function (){
Disablepopup ();
});
// Press escape event!
$ (Document). keypress (function (e ){
If (E. keycode = 27 & popupstatus = 1 ){
Disablepopup ();
}
});

});

 

Genneral.css

 

HTML, body, Div, span, applet, object, IFRAME, H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, pre, A, abbr, acronym, address, big, cite, code, Del, dfn, em,
Font, IMG, INS, KBD, Q, S, SAMP, small, strike, strong, sub, sup, TT, VAR, DL, DT, DD, ol, UL, Li, fieldset, form, label, legend, table, caption, tbody,
Tfoot, thead, TR, Th, TD {
Border: 0pt none;
Font-family: Inherit;
Font-size: 100%;
Font-style: Inherit;
Font-weight: Inherit;
Margin: 0pt;
Padding: 0pt;
Vertical-align: baseline;
}
Body {
Background: # fff none repeat scroll 0%;
Line-Height: 1;
Font-size: 12px;
Font-family: tahoma, Arial, sans-serif;
Margin: 0pt;
Height: 100%;
}
Table {
Border-collapse: Separate;
Border-Spacing: 0pt;
}
Caption, Th, TD {
Font-weight: normal;
Text-align: left;
}
BLOCKQUOTE: before, BLOCKQUOTE: After, Q: before, Q: After {
Content :"";
}
BLOCKQUOTE, q {
Quotes :"""";
}
A {
Cursor: pointer;
Text-Decoration: none;
}
BR. Both {
Clear: both;
}
# Backgroundpopup {
Display: none;
Position: fixed;
_ Position: absolute;/* hack for Internet Explorer 6 */
Height: 100%;
Width: 100%;
Top: 0;
Left: 0;
Background: #000000;
Border: 1px solid # cecece;
Z-index: 1;
}
# Popupcontact {

}
# Popupcontact H1 {

Color: # 6fa5fd;
Font-size: 22px;
Font-weight: 700;
Border-bottom: 1px dotted # d3d3d3;
Padding-bottom: 2px;
Margin-bottom: 20px;
}
# Popupcontactclose {
Font-size: 14px;
Line-Height: 14px;
Right: 6px;
Top: 6px;
Position: absolute;
Color: # 6fa5fd;
Font-weight: 700;
Display: block;
}
# Button {
Text-align: center;
Margin: 100px;
}

 

Test page

 

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml" dir = "LTR">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery tutorial Demonstration: div layer effect in the JavaScript pop-up windowCode-- Code I love </title>
 
<SCRIPT type = "text/JavaScript" src = "../UI-images/JS/jquery-1.4.2.min.js"> </SCRIPT>

<SCRIPT src = "Popup. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
 
Idcloses. Push ("idput ");
Popupmodal = {idloadhtml: "popupcontact1", idmodaltitle: "pop-up window test", isusetitle: True, align: "center", modalwidth: "800px", modalheight: "300px "};

</SCRIPT>
</Head>
<Body>
<Center>
<P> </P>
<P> </P>
<Div id = ""> <input type = "button" onclick = "popupmodal. Show ()" value = "click here to view the effect"/> </div>
<P> </P>
<P> Tutorial: Code of Div Layer Effect in JS pop-up window </a> </P>
</Center>
<Div id = "popupcontact1" style = "display: none">

<P id = "contactareasss">
This is the beautiful Div pop-up window we created. We can see that jquery is very powerful. We only need a small amount of CSS and JavaScript code to achieve this effect. <Br/>
In this pop-up window, we can place a logon box, registration form, important event reminder, and so on.
<Br/>
To close this window, click the X button in the upper-right corner or press the ESC key on the keyboard.
<Input type = "button" id = "buttonclose" value = "close"/>


</P>
</Div>

</Body>
</Html>