之前看了有一些现成的blockUI、Boxy、tipswindow等的jQuery弹出层插件,可是我的要求并不高,只需要在保存后弹出提示信息即可,至于复杂点的弹出层-可以编辑的,我是直接用bootstrap的modal来实现的,因此我就自己做了一个简洁的可以用来弹出提示信息的功能。

  首先在页面放一个提示strong:<strong id="tip"></strong>。接下来给它设置一下样式:

  提示信息样式

#tip {
position: absolute;
top: 50px;
left: 50%;
display: none;
z-index:;
}

  提示信息脚本

//tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息
function showTip(tip, type) {
var $tip = $('#tip');
$tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

  这样子,简单的jQuery弹出提示信息就完成了。话说上面的东西做了什么呢,其实就是弹出一个提示信息,该信息位置在网页top50px,left50%,然后再用margin-left左移信息的一半宽度,以此实现左右居中,半秒fadeIn显示,2秒停留,然后半秒fadeOut消失。除此之外呢其实我还给弹出信息美化了一下,就是用了bootstrap的alert alert-success alert-danger alert-info样 alert-warning式来美化。还有为什么要用stop(true)呢,主要是因为连续弹出多个提示框的时候,我的做法是让之前的提示框直接结束所有运动,w3c一看,$(selector).stop(stopAll,goToEnd),stopAll就是停止未完成的所有运动。

  不过这样有个问题,如果文本太短觉得不好怎么办,那就给它#tip加个最小宽度:

min-width: 200px;
text-align: center;

  至于为何不给showTip方法加个参数设置弹出信息的停留时间呢,那只是我不需要这个参数,直接写死也可以,这只是个人作风。还有个问题是showTip方法用起来还是有点不方便呀,那就再封装一下:

function ShowMsg(msg) {
ShowTip(msg, 'info');
} function ShowSuccess(msg) {
ShowTip(msg, 'success');
} function ShowFailure(msg) {
ShowTip(msg, 'danger');
} function ShowWarn(msg, $focus, clear) {
ShowTip(msg, 'warning');
if ($focus) {
     $focus.focus();
  if (clear) $focus.val('');
   }
return false;
}

  这样在ajax返回信息需要提示的时候调用一下ShowSuccess或者ShowFailure方法就可以了。你可能会有疑问ShowWarn怎么长的不一样,是干嘛子的呢,主要是因为在表单提交的时候需要进行验证,客户端验证的时候就调用这个方法,用法例如:

加两个参数$focus和clear主要是为了方便使用。。。

  另外若网页有iframe内联框架,若该iframe里也想让顶级窗口弹出提示信息,则得改一下showTip方法:

//tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息
function showTip(tip, type) {
  var $tip = $('#tip', top.document);
  $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

  如果不想样式和span以及脚本太分散,可以把他们整合成一个js插件:

//tip是提示信息,type:'success'是成功信息,'danger'是失败信息,'info'是普通信息,'warning'是警告信息
function ShowTip(tip, type) {
var $tip = $('#tip');
if ($tip.length == 0) {
$tip = $('<strong id="tip" style="position:absolute;top:50px;left: 50%;z-index:9999"></strong>');
$('body').append($tip);
}
$tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
} function ShowMsg(msg) {
ShowTip(msg, 'info');
} function ShowSuccess(msg) {
ShowTip(msg, 'success');
} function ShowFailure(msg) {
ShowTip(msg, 'danger');
} function ShowWarn(msg, $focus, clear) {
ShowTip(msg, 'warning');
if ($focus) {
     $focus.focus();
  if (clear) $focus.val('');
   }
return false;
}

  亲自试一试

jQuery弹出提示信息简洁版(自动消失)的更多相关文章

  1. jQuery弹出提示信息自动消失简洁版

    // 在bootstrap中可以,可以使用如下方式实现弹出提示信息自动消失,如果没有使用bootstrap框架,可以自定义样式 //tip是提示信息,type:'success'是成功信息,'dang ...

  2. winform C#屏幕右下角弹出消息框并自动消失

    ①弹出信息框后慢慢下降消失 在主窗体中新增按钮重命名为btnShowAndDisappearMessages,在click事件中写如下代码: private void btnShowAndDisapp ...

  3. iOS 渐变提示。错误弹出提示 几秒自动消失

    //事例 CGRect alertFarm = CGRectMake(,,,); [self noticeAlert:_bgView withNoticeStr:@"登录成功" w ...

  4. Jquery地图热点效果-鼠标经过弹出提示信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

  6. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  7. 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class,id,type的操作】【jquery选择器】

    1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...

  8. thinkPHP5.0使用form表单提交数据和删除文章,不用TP的提示页面,使用弹出提示信息

    form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...

  9. Bootstrap历练实例:弹出提示信息的样式按钮

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. iOS支付宝支付总结

    1.按照http://doc.open.alipay.com/doc2/detail?spm=0.0.0.0.SWdJgo&treeId=59&articleId=103676& ...

  2. Java Static关键字详解

    提起static关键字,相信大家绝对不会陌生,但是,想要完全说明白,猛的一想,发现自己好像又说不太明白... ...比方说,昨天被一个同学问起的时候... ... 当然,不是所有人都像我一样学艺不精的 ...

  3. Java面试常见知识点总结(三)

    21.volatile关键字: 一旦一个共享变量(类的成员变量.类的静态成员变量)被volatile修饰之后,那么就具备了两层语义:   (1) 保证了不同线程对这个变量进行操作时的可见性,即一个线程 ...

  4. C 标准库系列之errno.h

    errno.h 提供了一个整数全局变量errno,当系统调用或者库函数的错误事件发生时可能会修改该值,指明错误的原因,该值可在任何需要的地方被修改:一般情况不为0的值表示出现了异常或者错误. errn ...

  5. EXT.NET 使用总结(3)--动态图表

    动态生成雷达图--Radar 效果图: aspx页面代码: <ext:Panel ID="ResultPanel" Border="true" runat ...

  6. Redis 数据库入门指南

    Redis 是一个开源数据库,它使用内存数据结构存储,可作为数据库.缓存和消息代理使用.Redis 支持丰富的数据结构,有:字符串(Strings).哈希(Hashs).列表(Lists).集合(Se ...

  7. webrtc中APM(AudioProcessing module)的使用

    一,实例化和配置 AudioProcessing* apm = AudioProcessing::Create(0); //这里的0指的是channelID,只是一个标注那个通道的表示 apm-> ...

  8. SQL常见优化Sql查询性能的方法有哪些?

    常见优化Sql查询性能的方法有哪些? 1.查询条件减少使用函数,避免全表扫描 2.减少不必要的表连接 3.有些数据操作的业务逻辑可以放到应用层进行实现 4.可以使用with as 5.使用“临时表”暂 ...

  9. Entity FrameWork 5 增删改查 & 直接调用sql语句

    class="brush:csharp;gutter:true;"> #region 1.0 新增 -void Add() /// <summary> /// 1 ...

  10. Day 2 T1

    题目描述 组合数表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3)这三种选择方法.根据组合数的定 义,我们可以给出计算 ...