jQuery弹出提示信息简洁版(自动消失)

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

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

  提示信息样式

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

  提示信息脚本

//tip是提示信息,type:‘success‘是成功信息,‘danger‘是失败信息,‘info‘是普通信息
function ShowTip(tip, type) {
    var $tip = $(‘#tip‘);
    $tip.attr(‘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样式来美化。

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

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

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

function ShowInfo(msg) {
    ShowTip(msg, ‘info‘);
}
function ShowSuccess(msg) {
    ShowTip(msg, ‘success‘);
}
function ShowFailure(msg) {
    ShowTip(msg, ‘danger‘);
}

  这样在ajax返回信息需要提示的时候调用一下ShowSuccess或者ShowFailure方法就可以了。

  本文示例代码

时间: 2024-08-09 16:24:03

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

JQuery弹出提示框定时自动消失

运行效果: 用div而非setTimeout(),在页面中央显示提示,1.5秒后消失,不影响页面的正常布局. 1. HTML代码 HTML代码显示提示内容,放在页面中任何位置. <div class="alert"></div> 实际运行中其它居中参考 <div class="alert" style="height:50px;line-height:50px;font-size:14px;width:65%;margin:a

js弹框3秒后自动消失

开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法.该弹框使用了jquery-ui中的draggable方法,可拖动. 目录结构如下: 下面是案例代码: demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】

1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 使用jQuery前必须下载并引用jQuery的js文件,下载链接为h

jquery弹出层

Ug,一个轻量级的js组件.web弹窗(层)解决方案 .网址:http://ug66.cn/ 效果预览: Ug,简洁的代码.灵活的自定义,您只需简单地调用,即可轻松实现各种弹出效果. Ug,她尽可能地以更少的代码展现出更强健的功能,让您的页面拥有更丰富与便捷的UI体验. Ug.格外注重性能的提升.易用和实用性. 鄙人必须中止“王婆卖瓜”的陈述,因为一切的不足或友好,都需阁下在使用过程中去发现. jquery弹出层,布布扣,bubuko.com

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

form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架:target,规定在何处打开链接文档. 另外想要实现一个好看的方便.能重复使用的弹窗就要开发一个弹窗插件了,这里推荐使用前端的弹窗插件sweetalert.js,为了方便.重复使用我们把它成封装一个函数,页面要引入sweetalert.js的css和js文件 后端:为了方便以后重复使用,先写一个公共

jQuery弹出深色系层菜单

低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQuery实现导航菜单,鼠标悬停,在右侧倾斜而出,可以关闭.大图可以选用深色的图片. 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content

[Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法

Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完成后才会隐藏(display:none).有些奇葩手机就是不一样. 解决办法就是禁用消息框的动画: 方法一: 在app.js的launch方法里面加上 Ext.Msg.defaultAllowedConfig.showAnimation = false Ext.Msg.defaultAllowedConfig.hideAnimation = false

JQuery弹出层,实现弹层切换,可显示可隐藏。

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery弹出层效果</title> 5 <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> 6 <meta c

JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="