JQuery + jqmodal

First, the final effect is as follows:

 

Click "confirm information"

 

A confirmation window pops up to show all the information that has been filled in.

The information is very simple and easy to understand.

So we chose jQuery + jqmodal implementation.

The implementation method is as follows:
1. Reference jquery-1.4.2.js and jqModal. js in the page, pay attention to jQuery should be in front, because jqmodal is based on jQuery.

2. Create jqmodal.css and reference it. It is mainly for some artists. Note that the display of div. jqmDialog is none. Set the height and width to block the following ~~, I am a little lazy and slightly changed the css IN THE jqmodal example:
Copy codeThe Code is as follows:
/* Div. whiteOverlay {background: url (dialog/jqmBG.gif) white ;}*/
Div. jqDrag {cursor: move ;}

/* JqmModal dialog CSS courtesy;
Brice Burgess <bhb@iceburg.net> */

Div. jqmDialog {
Display: none;

Position: fixed;
Top: pixel PX;
Left: 50%;

Margin-left:-pixel PX;
Width: 900px;

Overflow: hidden;
Font-family: verdana, tahoma, helvetica;
}

/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* Html div. jqmDialog {
Position: absolute;
Top: expression(document.doc umentElement. scrollTop | document. body. scrollTop) + Math. round (17 * (document.doc umentElement. offsetHeight | document. body. clientHeight)/100) + 'px ');
}


/* [[[Title/Top Classes] */
Div. jqmdTC {
Background: # d5ff84 url (dialog/sprite.gif) repeat-x 0px-82px;
Color: #528c00;
Padding: 7px 22px 5px 5px;
Font-family: "sans serif", verdana, tahoma, helvetica;
Font-weight: bold;
* Zoom: 1;
}
Div. jqmdTL {background: url (dialog/sprite.gif) no-repeat 0px-41px; padding-left: 3px ;}
Div. jqmdTR {background: url (dialog/sprite.gif) no-repeat right 0px; padding-right: 3px; * zoom: 1 ;}


/* [[[Body/Message Classes] */
Div. jqmdBC {
Background: url (dialog/bc.gif) repeat-x center bottom;
Padding: 7px 7px 7px;
Height: 630px;
Overflow: auto;
}
Div. jqmdBL {background: url (dialog/bl.gif) no-repeat left bottom; padding-left: 7px ;}
Div. jqmdBR {background: url (dialog/br.gif) no-repeat right bottom; padding-right: 7px; * zoom: 1}

Div. jqmdMSG {color: #317895; font-size: large ;}


/* [[[Button classes] */
Input. jqmdX {
Position: absolute;
Right: 7px;
Top: 4px;
Padding: 0 0 0 19px;
Height: 19px;
Width: 0px;
Background: url (dialog/close.gif) no-repeat top left;
Overflow: hidden;
}
Input. jqmdXFocus {background-position: bottom left; outline: none ;}

Div. jqmdBC button, div. jqmdBC input [type = "submit"] {
Margin: 8px 10px 4px 10px;
Color: #777;
Background-color: # fff;
Cursor: pointer;
}

Div. jqmDialog input: focus, div. jqmDialog input. iefocus {background-color: # eaffc3 ;}

3. Create a div in the pop-up window on the webpage. Pay attention to class = "jqmDialog" (the one hidden in css)

4. Complete the display items in the div ~~ Process omitted :)

5. Create jquerywin. js and reference it. Note that it is placed behind the jqmodal reference for the same reason as above ~~, The Code is as follows:
Copy codeThe Code is as follows:
$ (). Ready (function (){
$ ('# Ex3a'). jqm ({
Trigger: '# ex3aTrigger ',
Overlay: 30,/* 0-100 (int): 0 is off/transparent, 100 is opaque */
OverlayClass: 'whiteoverlay '});
/* Make dialog draggable, assign handle to title */

// Close Button Highlighting. IE doesn't support: hover. Surprise?
$ ('Input. jqmdx ')
. Hover (
Function () {$ (this). addClass ('jqmdxfocal ');},
Function () {$ (this). removeClass ('jqmdxfocal ');})
. Focus (
Function () {this. hideFocus = true; $ (this). addClass ('jqmdxfocal ');})
. Blur (
Function () {$ (this). removeClass ('jqmdxfocal ');});

});

6. Note that a trigger is set in it. You can start the pop-up window or use js directly without a trigger. The method is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript" language = javascript>
Function showjqm (){
If(document.all.txt TIME_KUAIJI.value! = ""){
Document.all.txt TIME_KUAIJI0.style.color = "#317895 ";
Document.all.txttime_kuaiji0.innerhtml#document.all.txt TIME_KUAIJI.value ;}
Else {
Document.all.txt TIME_KUAIJI0.style.color = "Red ";
}
If(document.all.txt TIME_BIRTH.value! = ""){
Document.all.txt TIME_BIRTH0.style.color = "#317895 ";
Document.all.txttime_birth0.innerhtml#document.all.txt TIME_BIRTH.value ;}
Else {
Document.all.txt TIME_BIRTH0.style.color = "Red ";
}
If (Page_ClientValidate ())
$ ('# Ex3a'). jqmShow ();
}
</Script>

7. In the above js, there is only one sentence directly related to the pop-up window ('# ex3a'). jqmShow (); others are verification information.

8. In the above section of js, the more important sentence is if (Page_ClientValidate (). You can directly verify all the verification controls on the page before the pop-up window.