jQuery插件--DivAlert之旅（二）

 　　今天在首页看到了一位仁兄用JS实现的模仿QQ校友弹出提示框效果的文章（文章链接），同道中人啊。。看起确实不错，看来我第一版的有点单纯了，咱也美化一下，就借鉴一下人家这两张图片吧，改进的代码部分主要如下：

　　1、创建default.css文件:

1 img
2 {
3 vertical-align : middle ;
4 }
5 .jBg
6 {
7 position : absolute ;
8 top : 0 ;
9 left : 0 ;
10 z-index : 9999 ;
11 background-color : #999 ;
12 filter : alpha(opacity=70) ;
13 opacity : 0.7 ;
14 }
15 .jWrap
16 {
17 position : absolute ;
18 border : 1px solid #cef ;
19 z-index : 10000 ;
20 overflow : hidden ;
21 }
22 .jTit
23 {
24 text-align : left ;
25 background : #F1F1F1 ;
26 padding : 8px ;
27 cursor : move ;
28 height : 20px ;
29 vertical-align : middle ;
30 border-bottom : 1px solid #DEDEDE ;
31 text-indent : 5px ;
32 font-size : 15px ;
33 line-height : 20px ;
34 }
35 .jCon
36 {
37 background-color : #fff ;
38 padding : 10px 13px ;
39 overflow : auto ;
40 font-size : 15px ;
41 }
42 .jBtn, jBtn:hover
43 {
44 cursor : pointer ;
45 height : 17px ;
46 width : 17px ;
47 }
48 .jBtn
49 {
50 background : transparent url(close.png) no-repeat ;
51 position : absolute ;
52 right : 8px ;
53 top : 7px ;
54 }
55 .jBtn:hover
56 {
57 background : transparent url(close.png) no-repeat -19px 0px ;
58 }
59 .jConBottom
60 {
61 background : #F1F1F1 ;
62 text-align : right ;
63 width : 100% ;
64 height : 41px ;
65 position : absolute ;
66 }
67 .jBtnConfirm
68 {
69 background : url(btn.png) no-repeat 0 -24px transparent ;
70 cursor : pointer ;
71 color : #3F3F3F ;
72 width : 46px ;
73 height : 21px ;
74 line-height : 23px ;
75 text-align : center ;
76 font-size : 12px ;
77 float : right ;
78 margin-top : 10px ;
79 margin-right : 10px ;
80 }

　　2、修改JS默认options部分（以便与css文件配合）：

1 options.bgClass = o.bgClass || ' jBg ' ;
2 options.wrapClass = o.wrapClass || ' jWrap ' ;
3 options.titClass = o.titClass || ' jTit ' ;
4 options.conClass = o.conClass || ' jCon ' ;
5 options.clsClass = o.clsClass || ' jBtn ' ;
6 options.botDivClass = o.botDivClass || ' jBot ' ;
7 options.botBtnClass = o.botBtnClass || ' jBotBtn ' ;

　　3、由于俺以前只构建了title和content两个部分的div，为了实现效果还要添加两个div，一个是底部大的div，还有一个是确定按钮

1 // 创建底部包含确定按钮的div
2 var $conBottomDiv = createElement( " div " )
3 .addClass( ' jConBottom ' )
4 .css( ' top ' , options.height - $titDiv.outerHeight() - 40 + ' px ' );
5
6 // 创建底部确定按钮
7 var $conBottomBtn = createElement( " div " )
8 .addClass( ' jBtnConfirm ' )
9 .html( ' 确定 ' )
10 .click(close);

　　最后别忘了在Dom创建时将这两块附加在需要的位置就ok了。。。

　　效果图：

　　

　　装饰了一下，确实比以前要好看了啊^_^

　　下载：Demo

作者：Rocky翔
出处：http://www.cnblogs.com/RockyMyx/
本文版权归作者和博客园共有，欢迎转载，但请在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/RockyMyx/archive/2010/03/21/jQuery-msgPlugin2.html