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 相关文章推荐
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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生成html分页列表的代码
2007/03/18 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
python 实现有道翻译功能
2021/02/26 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
业务代表的岗位职责
2013/11/16 职场文书
上课打牌的检讨书
2014/02/15 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python