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 相关文章推荐
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
Vue实现按钮级权限方案
Nov 21 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采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
js禁止表单重复提交
2017/08/29 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
浅析python 字典嵌套
2020/09/29 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
亿企通软件测试面试题
2012/04/10 面试题
如何提高MySql的安全性
2014/06/19 面试题
大学生毕业评语
2014/12/31 职场文书
长城的导游词
2015/01/30 职场文书
大一学生个人总结
2015/02/15 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
资产移交协议书
2016/03/24 职场文书
求职自我评价参考范文
2019/05/16 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
MySQL数据库表约束讲解
2022/06/21 MySQL