现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用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. Swift—Cocoa Touch设计模式-备

    目标(Target)与动作(Action)是iOS和OS X应用开发的中事件处理机制.   问题提出 如图所示是一个ButtonLabelSample案例设计原型图,其中包含一个标签和一个按钮,当点击 ...

  2. 测试Beetle.Redis+Web Api

    在Web Api里用Beetle.Redis调用Redis服务端的TIME命令返回一个json格式,然后客户端是用的HttpTest4Net做的测试: CPU:I7-3770 内存:4G+4G 硬盘: ...

  3. Linux C判断日期格式是否合法

    Title:Linux C判断日期格式是否合法 --2013-10-11 11:54 #include <string.h> // strlen() , strncpy() #includ ...

  4. ASP超级网店V2.5一注入漏洞

    Title:ASP超级网店V2.5一注入漏洞  --2011-10-30 17:59 ASP超级网店V2.5 这个系统,有很多地方可以注入 http://www.xxxxxx.com/admin/pi ...

  5. css3中的圆角属性

    圆角属性:border-radius <style type="text/css"> .content{ border: 1px solid green; width: ...

  6. 【HDOJ】2585 Hotel

    字符串水题. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 55 cha ...

  7. BZOJ3315: [Usaco2013 Nov]Pogo-Cow

    3315: [Usaco2013 Nov]Pogo-Cow Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 143  Solved: 79[Submit] ...

  8. uniq 命令

    uniq 命令 文字 uniq是LINUX命令 用途 报告或删除文件中重复的行. 语法 uniq [ -c | -d | -u ] [ -f Fields ] [ -s Characters ] [ ...

  9. Android手机音量的控制

    1.AudioManager audio=(AudioManager) super.getSystemService(Context.AUDIO_SERVICE);//获得手机的声音服务 //设置加音 ...

  10. PHP中数组转换为XML格式

    最近公司要做一个API接口,输出格式要有JSON与XML格式, 在PHP中,输入JSON直接json_encode就可以,但输出XML没有提供函数,于是决定自己写一个. <?php /** * ...