基于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 相关文章推荐
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python3多线程操作简单示例
2018/05/22 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python tkinter canvas使用实例
2019/11/04 Python
Python实现结构体代码实例
2020/02/10 Python
用python实现名片管理系统
2020/06/18 Python
python实现数字炸弹游戏程序
2020/07/17 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
大二学期个人自我评价
2014/01/13 职场文书
鸿星尔克广告词
2014/03/21 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
上课不认真检讨书
2014/09/17 职场文书
医生见习报告范文
2014/11/03 职场文书
2014年底工作总结
2014/12/15 职场文书
工程款催款函
2015/06/24 职场文书