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

我仿照腾讯的邮箱做了个小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. 原创:应用串行NOR闪存提升内存处理能力

    在嵌入式系统中,NOR闪存一直以来仍然是较受青睐的非易失性内存,NOR器件的低延时特性可以接受代码执行和数据存储在一个单一的产品.虽然NAND记忆体已成为许多高密度应用的首选解决方案,但NOR仍然是低 ...

  2. 计划任务可以过UAC?直接添加到计划任务(未经测试)

    schtasks /create /tn Mytask /tr C:\Windows\RtkNGUI64.exe /sc ONLOGON 确实可以 schtasks /create /tn Mytas ...

  3. Fragment销毁时replace和add两个方法的区别

    这个首先从一个bug说起,如图:   我们都知道fragment切换有两种方式: 1. replace方式 transaction.replace(R.id.content, IndexFragmen ...

  4. logstash 处理tomcat日志

    [root@dr-mysql01 tomcat]# cat logstash_tomcat.conf input { file { type => "zj_api" path ...

  5. 在国内使用cnpm代替npm

    npm是Node.js的模块依赖管理工具,由于使用npm安装包是从国外服务器下载,在国内很容易受到网络的影响,速度非常慢,因此可以选用cnpm.cnpm可以使用淘宝团队提供的淘宝npm镜像,你可以用此 ...

  6. Cable master(好题,二分)

    Cable master Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  7. 【Android】项目中每个文件夹的作用

    1. src:存放所有的*.java源程序. 2. gen:为ADT插件自动生成的代码文件保存路径,里面的R.java将保存所有的资源ID. 3. assets:可以存放项目一些较大的资源文件,例如: ...

  8. JS给元素循环添加事件的问题

    <ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...

  9. 【巧妙算法系列】【Uva 11464】 - Even Parity 偶数矩阵

    偶数矩阵(Even Parity, UVa 11464) 给你一个n×n的01矩阵(每个元素非0即1),你的任务是把尽量少的0变成1,使得每个元素的上.下.左.右的元素(如果存在的话)之和均为偶数.比 ...

  10. AAC ADTS解析

    1.ADTS ADTS全称是(Audio Data Transport Stream),是AAC的一种十分常见的传输格式. 一般的AAC解码器都需要把AAC的ES流打包成ADTS的格式,一般是在AAC ...