基于JQuery 的消息提示框效果代码


Posted in Javascript onJuly 31, 2011

详细内容请下载附件 附件下载
先看一下效果:

基于JQuery 的消息提示框效果代码基于JQuery 的消息提示框效果代码基于JQuery 的消息提示框效果代码

内容都集合到一个1.58KB的js文件里
var returnurl = ''; 
var messagebox_timer; 
$.fn.messagebox = function (message, url, type, delay) { 
clearTimeout(messagebox_timer); 
$("#msgprint").remove(); 
var m_body = $(this); 
delay = (typeof delay == "undefined" ? 5000 : delay); 
returnurl = url; 
var box_style = 'position:absolute;display:none;z-index:1000;padding:10px 30px 10px 40px;'; 
switch (type) { 
case 1: box_style += 'border:1px solid Green;color:#090;background:url(../Icons/ok.png) 10px 10px no-repeat #F1FEF2;'; break; 
case 0: box_style += 'border:1px solid Red;color:#EE1010;background:url(../Icons/error.png) 10px 10px no-repeat #FDF8E8;'; break; 
default: box_style += 'border:1px solid Orange;color:Orange;background:url(../Icons/warning.png) 10px 10px no-repeat #FEFDE9;'; break 
} 
var str = "<div id=\"msgprint\" style=\"" + box_style + "\">" + message + "</div>"; m_body.append(str); 
var dom_obj = document.getElementById("msgprint"); 
var ext_width = $("#msgprint").width(); 
dom_obj.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - dom_obj.offsetHeight - $("#msgprint").height()) / 2) + "px"; 
dom_obj.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - dom_obj.offsetWidth - $("#msgprint").width()) / 2) + "px"; 
$("#msgprint").fadeIn(1000, function () { messagebox_timer = setTimeout(messagebox_out, delay) }); 
}; 
function messagebox_out() { 
if (returnurl == undefined || returnurl == '') { $("#msgprint").fadeOut(1000) } 
if (returnurl == "back") { this.history.back(-1) } else if (returnurl != "" && returnurl != undefined) { this.location.href = returnurl } 
}

引用的js文件:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script src="Scripts/Jquery.L.Message.js" type="text/javascript"></script>

页面代码:
<body> 
<div id="hello" style="height: 350px;"> 
<ul><li><a href="javascript:$('#hello').messagebox('成功提示<br/>成功提示', 'http://localhost:5083/', 1, 20000);">成功,20秒后跳转</a></li> 
<li> <a href="javascript:$('#hello').messagebox('错误提示<br/>错误提示', '', 0, 1000);">失败,1秒消失</a></li> 
<li> <a href="javascript:$('body').messagebox('这是警告<br/>这是警告', 'back', 2);">警告,默认时间5秒后后退</a></li></ul></div></body>
Javascript 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
jquery实现页面加载效果
Feb 21 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 #Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 #Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 #Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 #Javascript
工作需要写的一个js拖拽组件
Jul 28 #Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 #Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 #Javascript
You might like
javascript 函数式编程
2007/08/16 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Python标准库itertools的使用方法
2020/01/17 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
浅谈django channels 路由误导
2020/05/28 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
五年后的职业生涯规划
2014/03/04 职场文书
健康教育评估方案
2014/05/25 职场文书
英文商务邀请函范文
2015/01/31 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技