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 相关文章推荐
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
vue 挂载路由到头部导航的方法
Nov 13 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
JavaScript Event Loop相关原理解析
Jun 10 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python运算符重载详解及实例代码
2017/03/07 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
物流司机岗位职责
2013/12/28 职场文书
道德之星事迹材料
2014/05/03 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
社会实践心得体会范文
2016/01/14 职场文书
员工升职自我评价
2019/03/26 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS