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/
本文版权归作者和博客园共有，欢迎转载，但请在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。