我们做网站，经常会遇到消息提示。

我仿照腾讯的邮箱做了个小demo。

提示出现后，几秒消失。提示的位置是固定的。不受布局的影响。

效果如下：

提示通常分两种，一种使错误提示，一种是成功提示。用不同的css已表示区分。

代码如下：

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>

<script src="./js/jquery-1.4.2.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="./css/demo.css">

<script type="text/javascript">

    $(document).ready(function(){

        $("#message").click(function(){

            showMsg('msg','success',);

        });

        $("#error").click(function(){

            showMsg('errmsg','fail',);

        });

    });

    function showMsg(msgtype,msgcontent,time){

        $("#msgBoxDIV span").attr("class",msgtype).text(msgcontent); //获取提示信息并设置

        $("#msgBoxDIV").show();

        setTimeout(function () {

        $("#msgBoxDIV").hide();

        }, time);

    }

</script>

</head>

<div id="msgBoxDIV" style="position: absolute; width: 100%; padding-top: 2px; height: 24px; top: 43px; text-align: center; display: none;">

    <span></span>

</div>

<a class="btn_gray btn_space" hidefocus="" id="message" onclick="getTop();" href="javascript:;">提示消息</a>

<a class="btn_gray btn_space" hidefocus="" id="error"  href="javascript:;" name="del">提示错误</a>

</html>

msgBoxDIV中的位置是固定死的，里面的span可以展示错误信息。

css样式如下：

.errmsg {

background: #ef8f00;

z-index: ;

}

.msg {

background: #68af02;

z-index: ;

}

.msg, .errmsg {

margin-left: 10px;

white-space: nowrap;

padding: 3px 24px 3px;

color: #fff;

height: 20px;

line-height: 18px;

border-radius: 3px;

}

js中主要用到：

$("#msgBoxDIV").show();

        setTimeout(function () {

        $("#msgBoxDIV").hide();

        }, time);

显示，之后几秒再隐藏。就是这么个逻辑。

消息提示demo的更多相关文章

  1. 基于PNotify的消息提示Demo（轮询）

    需求:有些任务需要定时更新,获取最新的消息,这样就需要定时轮询,再者需要一种友好的提示. 以下就是使用PNotify插件的消息提示: 1.HTML代码 <!DOCTYPE html> &l ...

  2. 【C#】组件发布：MessageTip，轻快型消息提示窗

    -------------201610212046更新------------- 更新至2.0版,基本完全重写,重点: 改为基于原生LayeredWindow窗体和UpdateLayeredWindo ...

  3. jquery插件：仿百度首页可展开收起的消息提示控件

    消息提示插件大伙并不陌生了,无论是个系统还是网站,基本都要有消息系统.但我认为,一个好的提示插件应当具备很好的独立性,不与页面其他元素发生任何关系,其次是能对外提供丰富的接口,因为你生来就是被别人来调 ...

  4. 【Android代码片段之六】Toast工具类（实现带图片的Toast消息提示）

    转载请注明出处,原文网址:http://blog.csdn.net/m_changgong/article/details/6841266  作者:张燕广 实现的Toast工具类ToastUtil封装 ...

  5. 精美舒适的对话消息提示框--第三方开源--SweetAlertDialog

    SweetAlertDialog(sweet-alert-dialog)是一个套制作精美.动画效果出色生动的Android对话.消息提示框 SweetAlertDialog(sweet-alert-d ...

  6. 插件使用一顶部消息提示---overhang

    overhang 是一个非常好的消息提示插件,它是在顶部提示. 官方网站:https://github.com/paulkr/overhang.js 使用方法 1.引入jquery库和jqeury u ...

  7. 【WPF】屏幕右下角消息提示框

    WPF做一个仿QQ的右下角消息提示窗,网上找到几个Demo后,选了一个比较好用的. 博客 http://blog.csdn.net/huangli321456/article/details/5052 ...

  8. ymPrompt.js消息提示组件

    转载:https://www.cnblogs.com/linzheng/archive/2010/11/15/1878058.html 使用说明: 1.在页面中引入ymPrompt.js.如:< ...

  9. 【C#】无损转换Image为Icon 【C#】组件发布：MessageTip，轻快型消息提示窗 【C#】给无窗口的进程发送消息 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体 【手记】调用Process.EnterDebugMode引发异常：并非所有引用的特权或组都分配给呼叫方 【C#】DataRowState演变备忘

    [C#]无损转换Image为Icon 如题,市面上常见的方法是: var handle = bmp.GetHicon(); //得到图标句柄 return Icon.FromHandle(handle ...

随机推荐

  1. 【温故而知新-万花筒】C# 异步编程 逆变 协变 委托 事件 事件参数 迭代 线程、多线程、线程池、后台线程

    额基本脱离了2.0 3.5的时代了.在.net 4.0+ 时代.一切都是辣么简单! 参考文档: http://www.cnblogs.com/linzheng/archive/2012/04/11/2 ...

  2. [置顶] SPL讲解(6)--Condition篇

    SmartPersistenceLayer 2.0 之 Condition篇 原理        强大的Condition功能是SPL的一个特性,可以使用Condition完成绝大部分的条件定义,使用 ...

  3. 瑞柏匡丞：用全局观开发App

    不管是互联网金融还是生活服务,移动端APP开发都是各大商家关注的重点.众多研发机构的涌入,使得APP的市场环境已经再无技术壁垒可言.在APP市场中,神州锐达的研发水准和客户认同度,一直受到业内人士的称 ...

  4. 服务器放在不同省份的IDC机房，数据如何同步？一个域名如何动态解析到不同IP的服务器

    服务器放在不同省份的IDC机房,数据如何同步?淘宝的做法是不同IDC机房之间拉光纤,异地容灾和性能无关,异地容灾是应对断电.地震这种不可抗拒因素的 同城分流,异地容灾 是什么意思?你比如说公司的业务涉 ...

  5. redhat6.3 64位更新源（使用网易源）全过程记录

    本篇博客参考:http://chinaxiaoyu.diandian.com/post/2013-01-24/40046529897.首先在浏览器中输入http://tel.mirrors.163.c ...

  6. Wine --- Linux上运行 Windows 应用

    https://www.winehq.org/ Wine (“Wine Is Not an Emulator” 的首字母缩写)是一个能够在多种 POSIX-compliant 操作系统(诸如 Linu ...

  7. 在php添加mongo过程中出现的mongo.so: > undefined symbol: php_json_encode in Unknown on line 0. After installation mongo driver for php 的错误

    3 down vote my system is centos 6.3. I got the problem solved. vim /etc/php.ini then add extension=j ...

  8. 卡特兰数 Catalan数 ( ACM 数论 组合 )

    卡特兰数 Catalan数 ( ACM 数论 组合 ) Posted on 2010-08-07 21:51 MiYu 阅读(13170) 评论(1)  编辑 收藏 引用 所属分类: ACM ( 数论 ...

  9. 代码中实际运用memcached——java

    以下文章取自:http://jameswxx.iteye.com/blog/1168711 memcached的java客户端有好几种,http://code.google.com/p/memcach ...

  10. CentOS 6.5下Percona Xtrabackup的安装错误解决方案

    1.下载最新版的Xtracbackup 2.安装 yum install perl-DBIyum install perl-DBD-MySQLyum install perl-Time-HiResyu ...