jQuery+jqmodal彈出窗口實(shí)現(xiàn)代碼分明

更新時(shí)間：2010年06月14日 01:36:18 作者：

jQuery+jqmodal彈出窗口的制作方法，需要的朋友可以參考下。

先上圖，最終效果如下

點(diǎn)擊“信息確認(rèn)”

就是彈出一個(gè)確認(rèn)窗口，把已經(jīng)填報(bào)的信息都放到里面看看。

信息放里面很簡(jiǎn)答，主要是彈出窗口要做得好看點(diǎn)。

所以選擇了jQuery+jqmodal實(shí)現(xiàn)

實(shí)現(xiàn)方法如下
1、頁(yè)面中引用jquery-1.4.2.js和jqModal.js，注意jQuery要在前面，因?yàn)閖qmodal是以jQuery為基礎(chǔ)的。

2、建立jqModal.css，并引用，主要是些美工的東東，注意div.jqmDialog 的 display為 none。高度和寬度要設(shè)置好，擋住下面的，好看~~，我偷個(gè)懶，把jqmodal示例的css稍微改了下：）如下：

復(fù)制代碼代碼如下:

 
/*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;} 

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、在網(wǎng)頁(yè)里面建立彈出窗口的div，注意class="jqmDialog"（就是css里面隱藏的那個(gè)）

4、在這個(gè)div里面把需要顯示的東東整好~~過(guò)程略：）

5、建立jquerywin.js并引用，注意放到j(luò)qmodal引用的后面，原因同上~~，代碼如下：

復(fù)制代碼代碼如下:

 
$().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、注意，里面設(shè)置了一個(gè)trigger，可以出發(fā)彈出窗口，也可以不用trigger，直接使用js出發(fā)，方法如下：

復(fù)制代碼代碼如下:

 
<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里面，其實(shí)和彈出窗口直接相關(guān)的只有一句$('#ex3a').jqmShow(); 其他的都是驗(yàn)證的信息

8、上面的一段js里面，比較重要的還有這句if( Page_ClientValidate()) ，可以在彈出窗口之前直行頁(yè)面中所有驗(yàn)證控件的驗(yàn)證工作。

您可能感興趣的文章: