Jquery 网站保存信息提示消息实现,提示后自动消失
现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用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 网站保存信息提示消息实现,提示后自动消失的更多相关文章
- Axure实现提示文本单击显示后自动消失的效果
Axure实现提示文本单击显示后自动消失的效果 方法/步骤 如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失. ...
- axure如何实现提示框3s后自动消失
本示例基于axure8 实现 1.先做两个元件,一个按钮,一个提示框 2.将弹框“发布成功提示”设置为,页面载入时隐藏,这样预览页面时,该弹框是隐藏状态 3.给按钮添加交互样式,如下: 4.预览,点击 ...
- jquery 提示信息显示后自动消失的具体实现
方法一: 复制代码 代码如下: $("#errormsg").html("您的信息输入错误,请重试!").show(300).delay(3000).hide( ...
- jQuery在HTML文档加载完毕后自动执行某个事件;
原来onchange=“fucntionname(parms)”: <select name="country" id="selCountries_{$sn}&qu ...
- 示例:WPF中自定义MessageService应用DialogHost、Snackbar、NotifyIcon显示各种场景提示消息
原文:示例:WPF中自定义MessageService应用DialogHost.Snackbar.NotifyIcon显示各种场景提示消息 一.目的:不同交互场景需要提示不同的消息,不同的消息需要用不 ...
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
- jQuery实现鼠标移到元素上动态提示消息框效果
当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...
- 一款基于jquery超炫的弹出层提示消息
今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- jquery提示消息,简单通用
jquery提示消息.简单通用 function showTips(txt,time,status) { var htmlCon = ''; if(txt != ''){ if(status != 0 ...
随机推荐
- ubuntu下怎么显示右上角的小键盘
Ubuntu右上角小键盘不见了解决方法: ibus输入法的图标经常消失,输入中文时很不方便,重启一下ibus! 按Ctrl+ALT+T 快捷键打开终端, 输入: 1.killall ibu ...
- Linux学习——粘粘今天看的东西
由二分割表就叧有64 bytes而已,最多叧能容纳四笔分割的记录, 这四个分割的记录被称为主要(Primary)戒延伸(Extended)分割槽.分割槽的最小单位为磁柱(cylinder)请注意, 延 ...
- atof
So given a string like "2.23" your function should return double 2.23. This might seem eas ...
- 将Altium中的原理图与PCB导出为PDF的步骤与方法
1.通过File-Smart PDF(文件-智能PDF),快捷键F-M打开. 2.选择打印的范围:Current Project还是Current Document,还有生成的PDF的存放位置. 3. ...
- WPF自定义控件与样式(15)-终结篇
原文:WPF自定义控件与样式(15)-终结篇 系列文章目录 WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与 ...
- 基于SQL_ID查看对象大小
SQL> set echo off set echo off set verify off set serveroutput on set feedback off set lines 200 ...
- Linux系统编程(37)—— socket编程之UDP服务器与客户端
典型的UDP客户端/服务器通讯过程: 编写UDP Client程序的步骤 1.初始化sockaddr_in结构的变量,并赋值.这里使用"8888"作为连接的服务程序的端口,从命令行 ...
- U8800安装软件显示无效的URI问题
看到很多人遇到这个问题,其中包括我自己,最后找到可行的解决办法,现整理出来一个新帖,有同样问题的U友可以参考下. 手机先连接电脑,进入USB存储状态,然后在计算机上找到SD卡目录下的.android_ ...
- HDOJ 1391 Number Steps(打表DP)
Problem Description Starting from point (0,0) on a plane, we have written all non-negative integers ...
- android SimpleCursorAdapter的使用
String[] fields=new String[]{"foodname","price","taste","stuff&qu ...