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面试题与Javascript词法作用域说明
Nov 09 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
基于复选框demo(分享)
Sep 27 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
php实现的双色球算法示例
2017/06/20 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
python计算最大优先级队列实例
2013/12/18 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python 获取图片分辨率的方法
2019/01/08 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
简历的自荐信
2013/12/19 职场文书
先进集体获奖感言
2014/02/13 职场文书
玄武湖导游词
2015/02/05 职场文书
社区重阳节活动总结
2015/03/24 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书