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 相关文章推荐
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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网站提速三大“软”招
2006/10/09 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
如何在PHP中使用数组
2020/06/09 PHP
javascript学习网址备忘
2007/05/29 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
python求最大连续子数组的和
2018/07/07 Python
Python常用库大全及简要说明
2020/01/17 Python
python scatter函数用法实例详解
2020/02/11 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
毕业证丢失证明
2014/01/15 职场文书
公司担保书格式范文
2014/05/12 职场文书
体育节口号
2014/06/19 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
初一语文教学反思
2016/03/03 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
python Polars库的使用简介
2021/04/21 Python
opencv检测动态物体的实现
2021/07/21 Python