先上圖，最終效果如下
點擊“信息確認”
就是彈出一個確認窗口，把已經填報的信息都放到裡面看看。
信息放裡面很簡答，主要是彈出窗口要做得好看點。
所以選擇了jQuery+jqmodal實現
實現方法如下
1、頁面中引用jquery-1.4.2.js和jqModal.js，注意jQuery要在前面，因為jqmodal是以jQuery為基礎的。
2、建立jqModal.css，並引用，主要是些美工的東東，注意div.jqmDialog 的 display為 none。高度和寬度要設置好，擋住下面的，好看~~，我偷個懶，把jqmodal示例的css稍微改了下：）如下：
代碼如下:
/*div.whiteOverlay { background: url(dialog/jqmBG.gif) white; }*/
div.jqDrag {cursor: move;}
/* jqmModal dialog CSS courtesy of;
Brice Burgess <[email protected]> */
div.jqmDialog {
display: none;
position: fixed;
top: 106px;
left: 50%;
margin-left: -450px;
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.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.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、在網頁裡面建立彈出窗口的div，注意class="jqmDialog"（就是css裡面隱藏的那個）
4、在這個div裡面把需要顯示的東東整好~~過程略：）
5、建立jquerywin.js並引用，注意放到jqmodal引用的後面，原因同上~~，代碼如下：
代碼如下:
$().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('jqmdXFocus'); },
function(){ $(this).removeClass('jqmdXFocus'); })
.focus(
function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
.blur(
function(){ $(this).removeClass('jqmdXFocus'); });
});
6、注意，裡面設置了一個trigger，可以出發彈出窗口，也可以不用trigger，直接使用js出發，方法如下：
代碼如下:
<script type="text/javascript" language=javascript>
function showjqm(){
if(document.all.txtTIME_KUAIJI.value!=""){
document.all.txtTIME_KUAIJI0.style.color="#317895";
document.all.txtTIME_KUAIJI0.innerHTML=document.all.txtTIME_KUAIJI.value;}
else{
document.all.txtTIME_KUAIJI0.style.color="Red";
}
if(document.all.txtTIME_BIRTH.value!=""){
document.all.txtTIME_BIRTH0.style.color="#317895";
document.all.txtTIME_BIRTH0.innerHTML=document.all.txtTIME_BIRTH.value;}
else{
document.all.txtTIME_BIRTH0.style.color="Red";
}
if( Page_ClientValidate())
$('#ex3a').jqmShow();
}
</script>
7、在上面的js裡面，其實和彈出窗口直接相關的只有一句$('#ex3a').jqmShow(); 其他的都是驗證的信息
8、上面的一段js裡面，比較重要的還有這句if( Page_ClientValidate()) ，可以在彈出窗口之前直行頁面中所有驗證控件的驗證工作。