jquery提示等待消息经典插件blockUI

jquery非常经典的等待提示插件，具体官网

http://jquery.malsup.com/block/

参数：

// override these in your code to change the default behavior and style 
$.blockUI.defaults = {     
	// message displayed when blocking (use null for no message)     
	message:  '<h1>Please wait...</h1>',      
	title: null,        // title string; only used when theme == true     
	draggable: true,    // only used when theme == true (requires jquery-ui.js to be loaded)      theme: false, // set to true to use with jQuery UI themes      
	// styles for the message when blocking; if you wish to disable     
	// these and use an external stylesheet then do this in your code:     
	// $.blockUI.defaults.css = {};     
	css: {
		padding:0,
		margin:0,
		width:'30%',         
		top:'40%',         
		left:'35%',         
		textAlign:'center',         
		color:'#000',         
		border:'3px solid #aaa',         
		backgroundColor:'#fff',
		cursor:'wait',
		opacity:0.6
	},      
	// minimal style set used when themes are used     
	themedCSS: {         
		width:'30%',         
		top:'40%',         
		left:'35%'     
	},      
	// styles for the overlay设置覆盖层样式  
	overlayCSS:  {         
		backgroundColor:'#000',         
		opacity:0.6,
		cursor:'wait'     
	},      
	// style to replace wait cursor before unblocking to correct issue     
	// of lingering wait cursor     
	cursorReset: 'default',      
	// styles applied when using $.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 issues: 'about:blank' fails on HTTPS and javascript:false is slow     
	// (hat tip to Jorge H. N. de Vasconcelos)     
	iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',      
	// force usage of iframe in non-IE browsers (handy for blocking applets)     
	forceIframe: false,      
	// z-index for the blocking overlay     
	baseZ: 1000,      
	// set these to true to have the message automatically centered     
	centerX: true, // <-- only effects element blocking (page block controlled via css above)     
	centerY: true,      
	// allow body element to be stetched in ie6; this makes blocking look better     
	// on "short" pages.  disable if you wish to prevent changes to the body height     
	allowBodyStretch: true,      
	// enable if you want key and mouse events to be disabled for content that is blocked     
	bindEvents: true,      
	// be default blockUI will supress tab navigation from leaving blocking content     
	// (if bindEvents is true)     
	constrainTabKey: true,      
	// fadeIn time in millis; set to 0 to disable fadeIn on block     
	fadeIn:  200,     
	// fadeOut time in millis; set to 0 to disable fadeOut on unblock     
	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,      
	// suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)     
	// no longer needed in 2012     
	// applyPlatformOpacityRules: true,     
	
	
	// callback method invoked when fadeIn has completed and blocking message is visible遮罩完成后调用方法   
	onBlock: null,      
	// callback method invoked when unblocking has completed; the callback is   取消遮罩后调用方法
	// passed the element that has been unblocked (which is the window object for page     
	// blocks) and the options that were passed to the unblock call:     
	//   onUnblock(element, options)     
	onUnblock: null,      
	// don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493     
	quirksmodeOffsetHack: 4,      
	// class name of the message block     blockMsgClass: 'blockMsg',      
	// if it is already blocked, then ignore it (don't unblock and reblock)     
	ignoreIfBlocked: false 
}; 

 修改默认属性也非常简单可以使用下面两种方法：

1.全局的直接覆盖$.blockUI.defaults对象的属性

例如：

// change message border 
$.blockUI.defaults.css.border = '5px solid red'; 
 // make fadeOut effect shorter 
$.blockUI.defaults.fadeOut = 200;

2.使用 blockUI, unblockUI, block 或 unblock函数时传递局部对象覆盖

例如：

// change message border 
$.blockUI({ css: { border = '5px solid red'} }); 
// make fadeOut effect shorter 
$.unblockUI({ fadeOut: 200 }); 
 // use a different message 
$.blockUI({ message: 'Hold on!' }); 
 // use a different message 
$('#myDiv').block({ message: 'Processing...' }); 

 

说明：$.blockUI、$.unblockUI是针对真个页面遮罩而block、unblock是针对jquery选择的元素遮罩