基于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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
vue.js循环radio的实例
Nov 07 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
基于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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
多php服务器实现多session并发运行
2006/10/09 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
jquery中this的使用说明
2010/09/06 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python 加密与解密小结
2018/12/06 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
本科毕业生自荐信
2014/05/26 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
技术股份合作协议书
2014/10/05 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
社区宣传标语口号
2015/12/26 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python