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

css

  1. <style>
  2. #tip_message {
  3. z-index:;
  4. position: fixed;
  5. left:;
  6. top: 40%;
  7. text-align: center;
  8. width: 100%;
  9. }
  10.  
  11. #tip_message span {
  12. background-color: #03C440;
  13. opacity: .8;
  14. padding: 20px 50px;
  15. border-radius: 5px;
  16. text-align: center;
  17. color: #fff;
  18. font-size: 20px;
  19. }
  20.  
  21. #tip_message span.error {
  22. background-color: #EAA000;
  23. }
  24. </style>

javascript代码如下:

  1. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.  
  5. //提示成功信息
  6. ShowSuccessMessage = function(message, life) {
  7. var time = 3000;
  8. if (!life) {
  9. time = life;
  10. }
  11.  
  12. if ($("#tip_message").text().length > 0) {
  13. var msg = "<span>" + message + "</span>";
  14. $("#tip_message").empty().append(msg);
  15. } else {
  16. var msg = '<div id="tip_message"><span>' + message + "</span></div>";
  17. $("body").append(msg);
  18. }
  19.  
  20. $("#tip_message").fadeIn(time);
  21. $("#tip_message").fadeOut(time);
  22.  
  23. };
  24.  
  25. //提示错误信息
  26. ShowErrorMessage = function(message, life) {
  27. ShowSuccessMessage(message, life);
  28. $("#tip_message span").addClass("error");
  29. };
  30.  
  31. ShowSuccessMessage("Hello success!", 1000); // 第二个参数life是指消息显示时间
  32. //ShowErrorMessage("Hello error!", 1000);
  33. });
  34.  
  35. </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. ubuntu下怎么显示右上角的小键盘

    Ubuntu右上角小键盘不见了解决方法: ibus输入法的图标经常消失,输入中文时很不方便,重启一下ibus!   按Ctrl+ALT+T 快捷键打开终端,   输入:   1.killall ibu ...

  2. Linux学习——粘粘今天看的东西

    由二分割表就叧有64 bytes而已,最多叧能容纳四笔分割的记录, 这四个分割的记录被称为主要(Primary)戒延伸(Extended)分割槽.分割槽的最小单位为磁柱(cylinder)请注意, 延 ...

  3. atof

    So given a string like "2.23" your function should return double 2.23. This might seem eas ...

  4. 将Altium中的原理图与PCB导出为PDF的步骤与方法

    1.通过File-Smart PDF(文件-智能PDF),快捷键F-M打开. 2.选择打印的范围:Current Project还是Current Document,还有生成的PDF的存放位置. 3. ...

  5. WPF自定义控件与样式(15)-终结篇

    原文:WPF自定义控件与样式(15)-终结篇 系列文章目录  WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与 ...

  6. 基于SQL_ID查看对象大小

    SQL> set echo off set echo off set verify off set serveroutput on set feedback off set lines 200 ...

  7. Linux系统编程(37)—— socket编程之UDP服务器与客户端

    典型的UDP客户端/服务器通讯过程: 编写UDP Client程序的步骤 1.初始化sockaddr_in结构的变量,并赋值.这里使用"8888"作为连接的服务程序的端口,从命令行 ...

  8. U8800安装软件显示无效的URI问题

    看到很多人遇到这个问题,其中包括我自己,最后找到可行的解决办法,现整理出来一个新帖,有同样问题的U友可以参考下. 手机先连接电脑,进入USB存储状态,然后在计算机上找到SD卡目录下的.android_ ...

  9. HDOJ 1391 Number Steps(打表DP)

    Problem Description Starting from point (0,0) on a plane, we have written all non-negative integers ...

  10. android SimpleCursorAdapter的使用

    String[] fields=new String[]{"foodname","price","taste","stuff&qu ...