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函数
Dec 22 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
js闭包学习心得总结
Apr 17 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 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 daodb插入、更新与删除数据
2009/03/19 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
WordPress网站性能优化指南
2015/11/18 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
python采集百度百科的方法
2015/06/05 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python调用支付宝支付接口流程
2019/08/15 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
物业管理计划书
2014/01/10 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
玄武湖导游词
2015/02/05 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技