现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用alert提示消息,采用jQuery提示完消息,自动消失

css

<style>
#tip_message {
z-index:;
position: fixed;
left:;
top: 40%;
text-align: center;
width: 100%;
} #tip_message span {
background-color: #03C440;
opacity: .8;
padding: 20px 50px;
border-radius: 5px;
text-align: center;
color: #fff;
font-size: 20px;
} #tip_message span.error {
background-color: #EAA000;
}
</style>

javascript代码如下:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //提示成功信息
ShowSuccessMessage = function(message, life) {
var time = 3000;
if (!life) {
time = life;
} if ($("#tip_message").text().length > 0) {
var msg = "<span>" + message + "</span>";
$("#tip_message").empty().append(msg);
} else {
var msg = '<div id="tip_message"><span>' + message + "</span></div>";
$("body").append(msg);
} $("#tip_message").fadeIn(time);
$("#tip_message").fadeOut(time); }; //提示错误信息
ShowErrorMessage = function(message, life) {
ShowSuccessMessage(message, life);
$("#tip_message span").addClass("error");
}; ShowSuccessMessage("Hello success!", 1000); // 第二个参数life是指消息显示时间
//ShowErrorMessage("Hello error!", 1000);
}); </script>

Jquery 网站保存信息提示消息实现,提示后自动消失的更多相关文章

  1. Axure实现提示文本单击显示后自动消失的效果

    Axure实现提示文本单击显示后自动消失的效果 方法/步骤     如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失. ...

  2. axure如何实现提示框3s后自动消失

    本示例基于axure8 实现 1.先做两个元件,一个按钮,一个提示框 2.将弹框“发布成功提示”设置为,页面载入时隐藏,这样预览页面时,该弹框是隐藏状态 3.给按钮添加交互样式,如下: 4.预览,点击 ...

  3. jquery 提示信息显示后自动消失的具体实现

    方法一: 复制代码 代码如下: $("#errormsg").html("您的信息输入错误,请重试!").show(300).delay(3000).hide( ...

  4. jQuery在HTML文档加载完毕后自动执行某个事件;

    原来onchange=“fucntionname(parms)”: <select name="country" id="selCountries_{$sn}&qu ...

  5. 示例:WPF中自定义MessageService应用DialogHost、Snackbar、NotifyIcon显示各种场景提示消息

    原文:示例:WPF中自定义MessageService应用DialogHost.Snackbar.NotifyIcon显示各种场景提示消息 一.目的:不同交互场景需要提示不同的消息,不同的消息需要用不 ...

  6. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  7. jQuery实现鼠标移到元素上动态提示消息框效果

    当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...

  8. 一款基于jquery超炫的弹出层提示消息

    今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  9. jquery提示消息,简单通用

    jquery提示消息.简单通用 function showTips(txt,time,status) { var htmlCon = ''; if(txt != ''){ if(status != 0 ...

随机推荐

  1. console调试--转

    目录: 一.什么是 Console 二 .什么浏览器支持 Console 三.为什么不直接使用 alert 或自己写的 log 四.console.log(object[,object,.....]) ...

  2. 关于Android WebView内容不同屏幕兼容处理

    最近团队里项目开发APP时,其中有个界面要用到WebView来显示,而不用原生的控件. 开发这个界面的时候遇到一个问题,就是Android的碎片化导致有众多屏幕分辨率,不同分辨率的屏幕对这个界面Web ...

  3. BZOJ3538: [Usaco2014 Open]Dueling GPS

    3538: [Usaco2014 Open]Dueling GPS Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 59  Solved: 36[Subm ...

  4. C语言的一个关键字——static

      Static在C语言里面有两个作用,第一个是修饰变量,第二个是修饰函数. 1.Static修饰变量 按照作用范围的不同,变量分为局部变量和全局变量.如果用static修饰变量,不论这个变量是全局的 ...

  5. HDOJ(HDU) 1673 Optimal Parking

    Problem Description When shopping on Long Street, Michael usually parks his car at some random locat ...

  6. hackerrank:Almost sorted interval

    题目链接:https://www.hackerrank.com/challenges/almost-sorted-interval 题目大意: 定义一个“几乎单调”区间(区间最小值在最左面,最大值在最 ...

  7. 护肤品总结 Skin Care (1)

    很久没有更博了,最近过年在家,就写些生活上面的总结吧- 从护肤品开始,接下来陆陆续续会有化妆品,北美生活购物等. 因为是学生党,所以此帖中的东西基本都是价钱适中.因为经常买买买,所以用的好的坏的都会在 ...

  8. Java中的克隆(CLONE)

    解读克隆 编程过程中我们常常遇到如下情况: 假设有一个对象object,在某处又需要一个跟object一样的实例object2,强调的是object和object2是两个独立的实例,只是在 开始的时候 ...

  9. iOS--tableview分组

    -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ ; } -(NSInteger)tableView:(UITable ...

  10. mongodb授权登录

    mongodb版本为3.2(目前最新),演示的是linux下的mongodb授权认证 第一次登录不启动授权(mongo默认不启动) ./mongod --dbpath=/home/db/data -- ...