JQuery 插件 - 弹窗：BlockUI
JQuery的弹窗插件，网上实在有很多做的比较好的，比如artDialog、layer，甚至EasyUI等等。这些在效果上做的非常好。但我觉得一个小小的弹窗提示，没有必要引用这些（其实是有点大材小用了！）这里要介绍的是BlockUI，一个我认为非常好用的，简单朴素轻量级的插件。
先看一下效果：
下面就来讲一下使用。
一、引用插件
<script src="jquery.min.js" type="text/javascript"></script> <script src="Jquery.BlockUI.min.js" type="text/javascript"></script>
二、使用
<script type="text/javascript"> $.blockUI(); // 打开 //$.unblockUI(); // 关闭 </script>
只需要简单的一句就可以得到上面图片中的弹窗了。
三、参数设置及用法
打开BlockUI的源码可以看到，弹窗的属性都可以在defaults里面设置。
message : 弹出框的信息，可以为html，默认为：<h1>Please wait...</h1>
如：$.blockUI({message:'这是测评'});
$.blockUI({message:$("#test")});
title : 弹窗标题，默认 null ，只能在 theme 为true 的时候使用
theme : 默认 false ,设置为 true 时将使用jqueryUI的 theme
draggable : 是否可拖动，默认 true
css : 弹窗的css样式，默认如下
css:{ padding: 0, margin: 0, width: '30%', top: '40%', left: '35%', textAlign: 'center', color: '#000', border: '3px solid #aaa', backgroundColor:'#fff', cursor: 'default' }
overlayCSS : 遮罩层的样式，可以设置背景颜色，透明度，鼠标样式，默认如下：
overlayCSS:{ backgroundColor: '#000', opacity: 0.6, cursor: 'default' }
cursorReset : 等待消息返回是鼠标样式重置，默认为Default
cursorReset: 'default'
growlCSS : 使用$.growlUI完成弹窗时的样式（具体怎么用没试过）
growlCSS: { width: '350px', top: '10px', left: '', right: '10px', border: 'none', padding: '5px', opacity: 0.6, cursor: 'default', color: '#fff', backgroundColor: '#000', '-webkit-border-radius':'10px', '-moz-border-radius': '10px', 'border-radius': '10px' }
baseZ: 弹窗的z-index，默认1000，一般不需要修改，越大越在上面
centerX: 水平居中，默认为 true
centerY: 竖直居中，默认为 true
bindEvents: 遮罩时是否禁用键盘和鼠标事件，默认为 true
constrainTabKey: 遮罩内容的Tab导航是否可用，默认为 true
fadeIn : 淡入时间，默认为 200
fadeOut : 淡出时间，默认为 400
timeout : 自动淡出时间 默认为 0，不自动淡出
showOverlay : 是否自动遮罩 默认为 true
focusInput : 弹窗后自动获得焦点 默认为 true
onBlock : 弹窗完成后的回调，可自行定义function，默认为 null
onUnblock : 弹窗解锁后的回调，可自行定义function，默认为 null
常用的设置目测也就这么多了，想了解其它更多的属性设置，可以访问blockUI官网