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选择的元素遮罩