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与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
VUE脚手架具体使用方法
May 20 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
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 星际争霸
php获取post中的json数据的实现方法
2011/06/08 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Flask处理Web表单的实现方法
2021/01/31 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
经销商年会策划方案
2014/05/29 职场文书
2014年项目工作总结
2014/11/24 职场文书
员工手册董事长致辞
2015/07/29 职场文书
七年级作文之秋游
2019/10/21 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
Django框架中模型的用法
2022/06/10 Python