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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 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实现执行定时任务
2015/12/21 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
原生js实现瀑布流布局
2017/03/08 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python读取文件名并改名字的实例
2019/01/07 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python自动化发送邮件实例讲解
2021/01/04 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
离职证明标准格式
2014/09/15 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS