现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用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. web api 2 学习笔记 (OData Batch request)

    之前介绍过OData 中实现RPC的写法,今天在来一个批量操作. 参考 : https://damienbod.wordpress.com/2014/08/14/web-api-odata-v4-ba ...

  2. IBM总裁郭士纳总结的四类人

    IBM总裁郭士纳总结的四类人, 您属于哪一种呢-欢迎就此话题发表评论 积极采取行动促使事件发生的人 被动接受所发生事件的人 对事件持旁观者心态的人 什么事都不关心的人

  3. C++调用DLL有两种方法——静态调用和动态调用

    C++调用DLL有两种方法——静态调用和动态调用 标签: dllc++winapinullc 2011-09-09 09:49 11609人阅读 评论(0) 收藏 举报  分类: cpp(30)  [ ...

  4. ListView的getFirstVisiblePosition等方法返回的是哪个对象

    int firstPosition = lisView.getFirstVisiblePosition(); int lastPosition = lisView.getLastVisiblePosi ...

  5. 文件上传[Uploadify]

    Uploadify文件上传插件 Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合 ...

  6. gis论坛

    http://bbs.csdn.net/forums/GIS/ http://forums.mysql.com/list.php?23 http://www.remotegis.net/ http:/ ...

  7. 多个ajax按照顺序执行的方法

    $.ajax({ dataType: "json", async: false, //只需将此属性设置为false url: ~~, type: "GET", ...

  8. 安卓,分享到facebook的若干种方法汇总

    近期做了facebook的分享功能,遇到了很多问题,这里总结一下,供大家参考,不足之处还请大家指正. facebook分享方式: 1.通过intent调用调用本地facebook应用方式 支持单独分享 ...

  9. HDU_2037——最多电视节目问题

    Problem Description “今年暑假不AC?” “是的.” “那你干什么呢?” “看世界杯呀,笨蛋!” “@#$%^&*%...”确实如此,世界杯来了,球迷的节日也来了,估计很多 ...

  10. Python进阶(面向对象编程基础)(一)

    鉴于昨天被类和函数折腾得晕头转向,今特把类的知识翻出来温习. 1.定义类并创建实力对象 #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ ...