BlockUI对话框

BlockUI对话框BlockUI插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。

这个插件的用法很简单。

1阻止用户与页面交互：

$.blockUI();2自定义提示信息：

$.blockUI({message:'<h1><imgsrc="busy.gif"/>Justamoment...</h1>'});3自定义显示样式：

$.blockUI({css:{backgroundColor:'#f00',color:'#fff'}});4解除对页面的锁定：

$.unblockUI();5如果要使用默认设置来同步所有的AJAX请求动作，代码如下：

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);----------------------------------------------------------------------------------

BlockUI的默认选项设置如下：

//可以使用以下代码来自定义行为和样式

$.blockUI.defaults={

//锁定时显示的提示信息(无提示信息时设置为null)

message:'<h1>Pleasewait...</h1>',

//可以用CSS来格式化锁定时显示的信息

//如果你希望使用一个外部样式表，请使用一下代码

//$.blockUI.defaults.css={};

css:{

padding:0,

margin:0,

width:'30%',

top:'40%',

left:'35%',

textAlign:'center',

color:'#000',

border:'3pxsolid#aaa',

backgroundColor:'#fff'

},

//设置遮罩层的样式

overlayCSS:{

backgroundColor:'#000',

opacity:'0.6'

},

//允许在ie6中缩放body元素。这会使较短的页面看上去好一些

//如果你不想body元素的高度被改变，请设置为disable

allowBodyStretch:true,

//默认情况下blockUI会禁止tab导航

constrainTabKey:true,

//fadeOut时间单位为毫秒。设为0的话，在解除锁定时不使用fadeout效果。

fadeOut:400,

//禁止在FF/Linux上使用遮罩层样式(由于透明度的性能问题)

applyPlatformOpacityRules:1

};

改变blockUI的设置非常简单，有2种方式：

•1、全局设置,通过直接指定$.blockUI.defaults对象的值来设置。

•2、局部设置,将options对象放到blockUI(或block)函数内部。

全局设置

你可以通过直接的赋值来改变默认的选项。例如：

//改变提示信息的边框

$.blockUI.defaults.css.border='5pxsolidred';

//缩短fadeOut效果的时间

$.blockUI.defaults.fadeOut=200;

局部设置

局部设置是将options对象放到blockUI(或block)函数内部。这会强制使用局部设置来代替全局设置的值。例如:

//改变提示信息的边框

$.blockUI({css:{border='5pxsolidred'}});

...

//缩短fadeOut效果的时间

$.blockUI({fadeOut:200});

...

//使用一个不同的提示信息

$.blockUI({message:'Holdon!'});