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脚本实现Web页面信息交互
Oct 11 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
javascript搜索框效果实现方法
May 14 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
JavaScript异步操作中串行和并行
Nov 20 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
Banner程序
2006/10/09 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
jsonp原理及使用
2013/10/28 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python去除扩展名的实例讲解
2018/04/23 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
python-地图可视化组件folium的操作
2020/12/14 Python
仓库门卫岗位职责
2013/12/22 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
校园活动宣传方案
2014/03/28 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
村级个人对照检查材料
2014/08/22 职场文书
杭白菊导游词
2015/02/10 职场文书
如何写观后感
2015/06/19 职场文书
高一军训感想
2015/08/07 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Python Pygame实战之塔防游戏的实现
2022/03/17 Python