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

 更新时间:2010年04月01日 22:48:50   作者:  
今天在首页看到了一位仁兄用JS实现的模仿QQ校友弹出提示框效果的文章(文章链接),同道中人啊。。看起确实不错,看来我第一版的有点单纯了,咱也美化一下,就借鉴一下人家这两张图片吧
改进的代码部分主要如下:
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之旅(三) 推荐

相关文章

  • jQueryUI如何自定义组件实现代码

    jQueryUI如何自定义组件实现代码

    第一次自定义jQueryUI Widget 又是第一次,现在的感受是jQueryUI Widget能让你代码组织得更好,风格更一致。
    2010-11-11
  • 清空元素html(

    清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)

    这篇文章主要介绍了清空元素html("")、innerHTML="" 与 empty()的区别和应用,详细介绍了三者之间的原理及应用,需要的朋友可以参考下
    2017-08-08
  • jQuery常见面试题之DOM操作详析

    jQuery常见面试题之DOM操作详析

    关于jQuery的DOM操作面试问题其实有很多,下面这篇文章主要给大家介绍了jQuery常见面试题之DOM操作的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

    15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

    这篇文章主要介绍了15个值得开发人员关注的jQuery开发技巧和心得,详细总结分析了jQuery常用的开发技巧,需要的朋友可以参考下
    2016-05-05
  • jquery+json实现数据二级联动的方法

    jquery+json实现数据二级联动的方法

    这篇文章主要介绍了jquery+json实现数据二级联动的方法,涉及jQuery基于get方法与后台.net程序传输json交互实现二级联动菜单,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • jquery中EasyUI实现异步树

    jquery中EasyUI实现异步树

    前面我们分享了使用jquery中EasyUI实现同步树的代码,本文我们就来看下使用EasyUI实现异步树的方法和示例,希望小伙伴们能够喜欢。
    2015-03-03
  • 基于jQuery拖拽事件的封装

    基于jQuery拖拽事件的封装

    这篇文章主要为大家详细介绍了基于jQuery拖拽事件的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 高效的jQuery代码编写技巧总结

    高效的jQuery代码编写技巧总结

    好的代码会带来速度的提升,快速渲染和响应意味着更好的用户体验。本文主要总结了如何高效的编写jQuery代码的技巧,对提升你的jQuery和javascript代码具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 基于jQuery实现仿百度首页选项卡切换效果

    基于jQuery实现仿百度首页选项卡切换效果

    这篇文章主要介绍了基于jQuery实现仿百度首页选项卡切换效果的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • jquery 清空file域示例(兼容个浏览器)

    jquery 清空file域示例(兼容个浏览器)

    在本文将为大家介绍喜下如何使用jquery 清空file域并做到兼容个浏览器,感兴趣的朋友可以参考下
    2013-10-10

最新评论