快捷導(dǎo)航

基于jQuery的消息提示插件 DivAlert之旅（二）

更新時(shí)間：2010年04月01日 22:48:50 作者：

今天在首頁(yè)看到了一位仁兄用JS實(shí)現(xiàn)的模仿QQ校友彈出提示框效果的文章（文章鏈接），同道中人啊。?？雌鸫_實(shí)不錯(cuò)，看來(lái)我第一版的有點(diǎn)單純了，咱也美化一下，就借鑒一下人家這兩張圖片吧

改進(jìn)的代碼部分主要如下：
1、創(chuàng)建default.css文件:
代碼

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

 
img 
{ 
vertical-align:middle; 
} 
.jBg 
{ 
position: absolute; 
top: 0; 
left: 0; 
z-index: 9999; 
background-color: #999; 
filter: alpha(opacity=70); 
opacity: 0.7; 
} 
.jWrap 
{ 
position: absolute; 
border: 1px solid #cef; 
z-index: 10000; 
overflow: hidden; 
} 
.jTit 
{ 
text-align: left; 
background:#F1F1F1; 
padding: 8px; 
cursor: move; 
height: 20px; 
vertical-align: middle; 
border-bottom:1px solid #DEDEDE; 
text-indent:5px; 
font-size:15px; 
line-height:20px; 
} 
.jCon 
{ 
background-color: #fff; 
padding: 10px 13px; 
overflow: auto; 
font-size:15px; 
} 
.jBtn, jBtn:hover 
{ 
cursor:pointer; 
height:17px; 
width:17px; 
} 
.jBtn 
{ 
background:transparent url(close.png) no-repeat; 
position:absolute; 
right:8px; 
top:7px; 
} 
.jBtn:hover 
{ 
background:transparent url(close.png) no-repeat -19px 0px; 
} 
.jConBottom 
{ 
background:#F1F1F1; 
text-align:right; 
width:100%; 
height:41px; 
position:absolute; 
} 
.jBtnConfirm 
{ 
background:url(btn.png) no-repeat 0 -24px transparent; 
cursor:pointer; 
color:#3F3F3F; 
width:46px; 
height:21px; 
line-height:23px; 
text-align:center; 
font-size:12px; 
float:right; 
margin-top:10px; 
margin-right:10px; 
} 

　　2、修改JS默認(rèn)options部分（以便與css文件配合）：

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

 
options.bgClass = o.bgClass || 'jBg'; 
options.wrapClass = o.wrapClass || 'jWrap'; 
options.titClass = o.titClass || 'jTit'; 
options.conClass = o.conClass || 'jCon'; 
options.clsClass = o.clsClass || 'jBtn'; 
options.botDivClass = o.botDivClass || 'jBot'; 
options.botBtnClass = o.botBtnClass || 'jBotBtn'; 

　　3、由于俺以前只構(gòu)建了title和content兩個(gè)部分的div，為了實(shí)現(xiàn)效果還要添加兩個(gè)div，一個(gè)是底部大的div，還有一個(gè)是確定按鈕

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

 
//創(chuàng)建底部包含確定按鈕的div 
var $conBottomDiv = createElement("div") 
.addClass('jConBottom') 
.css('top', options.height - $titDiv.outerHeight() -40 + 'px'); 

//創(chuàng)建底部確定按鈕 
var $conBottomBtn = createElement("div") 
.addClass('jBtnConfirm') 
.html('確定') 
.click(close); 

　　最后別忘了在Dom創(chuàng)建時(shí)將這兩塊附加在需要的位置就ok了。。。
　　效果圖：