消息提示demo
我们做网站,经常会遇到消息提示。
我仿照腾讯的邮箱做了个小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的更多相关文章
- 基于PNotify的消息提示Demo(轮询)
需求:有些任务需要定时更新,获取最新的消息,这样就需要定时轮询,再者需要一种友好的提示. 以下就是使用PNotify插件的消息提示: 1.HTML代码 <!DOCTYPE html> &l ...
- 【C#】组件发布:MessageTip,轻快型消息提示窗
-------------201610212046更新------------- 更新至2.0版,基本完全重写,重点: 改为基于原生LayeredWindow窗体和UpdateLayeredWindo ...
- jquery插件:仿百度首页可展开收起的消息提示控件
消息提示插件大伙并不陌生了,无论是个系统还是网站,基本都要有消息系统.但我认为,一个好的提示插件应当具备很好的独立性,不与页面其他元素发生任何关系,其次是能对外提供丰富的接口,因为你生来就是被别人来调 ...
- 【Android代码片段之六】Toast工具类(实现带图片的Toast消息提示)
转载请注明出处,原文网址:http://blog.csdn.net/m_changgong/article/details/6841266 作者:张燕广 实现的Toast工具类ToastUtil封装 ...
- 精美舒适的对话消息提示框--第三方开源--SweetAlertDialog
SweetAlertDialog(sweet-alert-dialog)是一个套制作精美.动画效果出色生动的Android对话.消息提示框 SweetAlertDialog(sweet-alert-d ...
- 插件使用一顶部消息提示---overhang
overhang 是一个非常好的消息提示插件,它是在顶部提示. 官方网站:https://github.com/paulkr/overhang.js 使用方法 1.引入jquery库和jqeury u ...
- 【WPF】屏幕右下角消息提示框
WPF做一个仿QQ的右下角消息提示窗,网上找到几个Demo后,选了一个比较好用的. 博客 http://blog.csdn.net/huangli321456/article/details/5052 ...
- ymPrompt.js消息提示组件
转载:https://www.cnblogs.com/linzheng/archive/2010/11/15/1878058.html 使用说明: 1.在页面中引入ymPrompt.js.如:< ...
- 【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 ...
随机推荐
- arcgis api for silverlight使用google map等多个在线地图
原文 http://blog.csdn.net/leesmn/article/details/6820245 无可否认,google map实在是很漂亮.可惜对于使用arcgis api for si ...
- java学习之Java中JDK,JRE和JVM之间的关系(转载)
最近要重新抓一下java,大量扫技术文档,保存下来供自己查阅.以下转载自http://www.cnblogs.com/xiaofeixiang/p/4085159.html 初学JAVA很容易被其中的 ...
- tar解压错误
# tar -zxvf aaa.tar.gz tar: This does not look like a tar archive tar: Skipping to next header ...
- Intersection of Two Linked Lists 解答
Question Write a program to find the node at which the intersection of two singly linked lists begin ...
- 剑指offer-面试题16.反转链表
题目:定义一个函数,输入一个链表的头结点,反转该链表并输出反转后的头结点 链表结点定义如下: struct ListNode { int m_nKey; ListNode* m_pNext; } 其实 ...
- windows 基于命令行制作vhd虚拟磁盘
什么是VHD? VHD是Virtual Hard Disk的简称,就是虚拟硬盘,就是能把VHD文件直接虚拟成一个硬盘,在其中能像真实硬盘一样操作,读取.写入.创建分区.格式化.如果你用过虚拟机,就会知 ...
- 关于xhEditor
关于xhEditor xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chr ...
- JS 清除IE缓存
js中自动清除ie缓存方法 — 常用 对于动态文件,比如 index.asp?id=... 或者 index.aspx?id=... 相信有经验的程序员都知道怎样禁止浏览器缓存数据了. 但是对于静 ...
- EasyMonkeyDevice vs MonkeyDevice&HierarchyViewer API Mapping Matrix
1. 前言 本来这次文章的title是写成和前几篇类似的<EasyMonkeyDevice API实践全记录>,内容也打算把每一个API的实践和建议给记录下来,但后来想了下认为这样子并非最 ...
- [每日一题] OCP1z0-047 :2013-08-18 禁用启用约束――主键与外键 ..................................61
正确答案:C 根据题意,测试结果如下: 1.创建表emp,并且设emp_no字段为主键,设mgr_no字段为外键. gyj@MYDB> create table emp 2 (emp_no nu ...