基于jQuery的消息提示插件 DivAlert之旅(二)


Posted in Javascript onApril 01, 2010

改进的代码部分主要如下:
1、创建default.css文件:
代码

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默认options部分(以便与css文件配合):

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、由于俺以前只构建了title和content两个部分的div,为了实现效果还要添加两个div,一个是底部大的div,还有一个是确定按钮

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

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

效果图:
基于jQuery的消息提示插件 DivAlert之旅(二)
装饰了一下,确实比以前要好看了啊^_^
代码打包下载

基于jQuery的弹出消息插件 DivAlert之旅(一)

基于jQuery的消息提示插件 DivAlert之旅(二)

基于jQuery的消息提示插件 DivAlert之旅(三) 推荐

Javascript 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
vue-cli常用设置总结
Feb 24 Javascript
vue ssr 指南详读
Jun 29 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
介绍一下28个JS常用数组方法
May 06 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 #Javascript
基于jquery的tab切换 js原理
Apr 01 #Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 #Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 #Javascript
JQuery autocomplete 使用手册
Apr 01 #Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 #Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
监理员的岗位职责
2013/11/13 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs