jQuery+jqmodal弹出窗口实现代码分明

2020-05-17 06:22:12易采站长站整理

先上图,最终效果如下


 


点击“信息确认”


 


就是弹出一个确认窗口,把已经填报的信息都放到里面看看。


信息放里面很简答,主要是弹出窗口要做得好看点。


所以选择了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 <bhb@iceburg.net> */
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;}