jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)


Posted in Javascript onJanuary 09, 2013

功能:zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog,该插件对背景进行遮罩,然后弹出信息显示框,信息显示种类包括:

一、信息种类说明:

1.1、操作成功信息

jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

1.2、错误信息

jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

1.3、警告信息

jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

1.4、通知信息

jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

二、使用说明

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> <link href="style/showInfoDialog.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery-showInfoDialog.js"></script> 
</head> 
<body style="background-color:#4ed"> 
<div id = "test" style="width:1000px;height:800px;background-color:#fff"> 
</div> 
<script type="text/javascript"> 
var options = { 
'dialogType' : 'info', 
'theme' : 'info', 
'message' : '数据加载完成!', 
'refresh' : false 
}; 
$("#test").showInfoDialog(options); 
</script> 
</body> 
</html>

该例中对id为test的标签进行遮罩,然后显示信息

简单设置:

除包含必要的js,css文件外,另外需设置dialogType,theme属性,dialogType有四种方式:success,error,warning,info; 对应于四种主题(theme)设置:success,error,warning,info

message是需要显示的数据;

refresh代表关闭弹出框后是否需要重新加载页面

扩展:你可以添加自己的主题,格式如下:

.info {border: 3px solid #2FADD7; background: #92D6ED repeat-x top;} 
.info span {color: #0E7A9F;} 
.info .closestatus a {background: #2FADD7;} 
.info .closestatus a:hover {background: #228DB0;}
Javascript 相关文章推荐
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 #Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 #Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 #Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 #Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 #Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 #Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 #Javascript
You might like
如何用PHP实现插入排序?
2013/04/10 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
Vue表单实例代码
2016/09/05 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
详解Python中的__new__()方法的使用
2015/04/09 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python 性能优化技巧总结
2016/11/01 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
python添加菜单图文讲解
2019/06/04 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
社区庆中秋节活动方案
2014/02/07 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
我爱我班主题班会
2015/08/13 职场文书
节水宣传标语口号
2015/12/26 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python