一、信息种类说明:

1.1、操作成功信息

1.2、错误信息

1.3、警告信息

1.4、通知信息

二、使用说明

<!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;}

Jquery插件之信息弹出框showInfoDialog(成功、错误、警告、通知)的更多相关文章

  1. jquery dialog-优雅的弹出框

    前面一章已经对datepicker的使用,做了简单的说明.这一章主要对dialog如何使用做个说明.         jquery ui-dialog在web开发中运用还是比较多的.最常见的例子就是登 ...

  2. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  3. UniGui的信息弹出框MessageDlg自定义标题的方法(使用JS动态本地化文本)

    UniGui的信息弹出框MessageDlg的原型定义如下: procedure MessageDlg(const Msg: string; DlgType: TMsgDlgType; Buttons ...

  4. jQuery插件---轻量级的弹出窗口wBox

    Box Demo wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层, ...

  5. jquery实现简单的弹出框

    弹出框本身是一个div,默认是隐藏不展示的,在需要弹框的时候使其显示,并浮在当前页面之上 弹框样式: .tanchuang { width: 100%; height: 100%; display: ...

  6. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  7. 弹出框插件——dialog

    基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器. 思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定. 注意ie6包含两个问题:一. ...

  8. 第二百四十六节,Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

  9. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

随机推荐

  1. JavaScript高级程序设计24.pdf

    Element类型 Element类型用于表现XML或HTML元素,提供对元素标签名.子节点及特性的访问,它具有以下特征 nodeType的值为1: nodeName的值为元素的标签名: nodeVa ...

  2. opencl-Shader

    转载自:http://blog.csdn.net/leonwei/article/details/8956632 这里介绍关于OpenCL中program函数的写法,program函数通常是文本形式的 ...

  3. RDD.scala(源码)

    ---- map. --- flatMap.fliter.distinct.repartition.coalesce.sample.randomSplit.randomSampleWithRange. ...

  4. 如何成为一名优秀的web前端工程师(前端攻城师)?

    程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种:第一种一直在问:如何学习前端?第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀. ...

  5. 【转】shell 教程——03 Shell脚本语言与编译型语言的差异

    大体上,可以将程序设计语言可以分为两类:编译型语言和解释型语言. 编译型语言 很多传统的程序设计语言,例如Fortran.Ada.Pascal.C.C++和Java,都是编译型语言.这类语言需要预先将 ...

  6. crontab command not found

    在服务器上运行 crontab -e编辑定时任务 结果提示 command not found命令找不到,这就说明没安装crontab 由于 完整操作如下: [root@iZ11pvsxisqZ /] ...

  7. Linux编辑器的选择使用

    在执行 crontab -e的时候 发现编辑器不对 用的是nano 立刻 sudo select-editor 然后终端返回 Select an editor. To change later, ru ...

  8. 【转】android蓝牙开发 蓝牙设备的查找和连接

    1.  首先,要操作蓝牙,先要在AndroidManifest.xml里加入权限 // 管理蓝牙设备的权限 <uses-permissionandroid:name="android. ...

  9. MVC-@html.ActionLink的几种参数格式

    一 Html.ActionLink("linkText","actionName") 该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法, ...

  10. Request的getParameter和getAttribute方法的区别

    下面整理一下getParameter和getAttribute的区别和各自的使用范围.      (1)HttpServletRequest类有setAttribute()方法,而没有setParam ...