弹出层之2：JQuery.BlockUI

JQuery.BlockUI是众多JQuery插件弹出层中的一个，它小巧（原版16k，压缩后10左右）,容易使用, 功能齐全，支持Iframe，支持Modal，可定制性高也意味他默认谦虚的外表。

jQuery的BlockUI插件可以让你在使用AJAX时模拟同步行为，锁定浏览器(模式窗口)。当被激活时，它会防止用户活动的页面（或页面的一部分），直到它被禁用。 BlockUI添加元素的DOM，给它的外观和阻止用户交互行为。

1、首先引入插件

<script src="jquery.min.js" type="text/javascript"></script>
<script src="JQuery.BlockUI.min.2.39.js" type="text/javascript"></script>
2、调用

[b]显示源码

// 重写defaults对象中的属性
$.blockUI.defaults = {

//弹出的信息
message: '<h1>Please wait...</h1>',

//定义消息框样式
// $.blockUI.defaults.css = {};

//默认定义消息框样式Css样式
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
},

// 遮罩样式
overlayCSS: {
backgroundColor: '#000', //颜色
opacity: 0.6 //透明度
},

// 使用$.growlUI完成自动气泡时的样式
growlCSS: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: null,
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px', //貌似是圆角
'-moz-border-radius': '10px'
},

// 是否在非IE浏览器中使IFrame获得焦点，未验证的
forceIframe: false,

// 遮罩层的Z-Index值，越大越在上面
baseZ: 1000,

// 是否居中
centerX: true,
centerY: true,

//是否允许拉大
//短的网页上。禁用如果你想防止车身高度的变化
allowBodyStretch: true,

//遮罩时是否禁用键盘和鼠标事件
bindEvents: true,

// be default blockUI will supress tab navigation from leaving blocking content
// (if bindEvents is true)
//遮罩内容的Tab导航是否可用
constrainTabKey: true,

//淡入时间
fadeIn: 200,

//淡出时间
fadeOut: 400,

// time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
//自动淡出时间
timeout: 0,

//disable if you don't want to show the overlay
//是否自动遮罩
showOverlay: true,

// if true, focus will be placed in the first available input field when
// page blocking
//自动获得焦点
focusInput: true,

//抑制FF/Linux的叠加样式的使用（由于具有不透明的性能问题）
applyPlatformOpacityRules:true,

//调用解封已完成时回调方法;
// onUnblock(element, options)
onUnblock: null

总结：上面的文字个人认为写的比较烂，但基本的使用没有问题，详尽的支持是官网：http://www.malsup.com/jquery/block/,这个站还有一些其它插件也值得看看。

本文示例下载