基于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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
浅谈vue的第一个commit分析
Jun 08 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静态文件生成类实例分析
2015/01/03 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
JavaScript知识点整理
2015/12/09 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
Python中的类学习笔记
2014/09/23 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python字符串与url编码的转换实例
2018/05/10 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
python yield和Generator函数用法详解
2020/02/10 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
金蝶的一道SQL笔试题
2012/12/18 面试题
linux面试题参考答案(9)
2015/01/07 面试题
国际贸易本科毕业生求职信
2014/09/26 职场文书
英文商务邀请函范文
2015/01/31 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
工伤调解协议书
2016/03/21 职场文书