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 添加和移除函数的通用方法
Oct 20 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
javaScript基础语法介绍
Feb 28 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 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
解析isset与is_null的区别
2013/08/09 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
js获取变量
2006/08/24 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Django 开发环境配置过程详解
2019/07/18 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
什么是.net
2015/08/03 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
机电一体化求职信
2014/03/10 职场文书
行政内勤岗位职责
2014/04/07 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
辩论赛新闻稿
2015/07/17 职场文书