PS:一个Jquery的插件,显示Modal窗口
官方网址:
http://www.malsup.com/jquery/block/
使用参数:
Options
BlockUI's default options look (exactly) like this:
// 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>',
// 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'
},
// styles for the overlay
overlayCSS: {
backgroundColor:'#000',
opacity: '0.6'
},
// 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,
// be default blockUI will supress tab navigation from leaving blocking content;
constrainTabKey: true,
// fadeOut time in millis; set to 0 to disable fadeout on unblock
fadeOut: 400,
// suppresses the use of overlay styles on FF/Linux (due to significant performance issues with opacity)
applyPlatformOpacityRules: true
};
Changing the blockUI options is simple and can be done in one of two ways:
- Globally, by directly overriding the values in the
$.blockUI.defaults
object
- Locally, by passing an options object to the
blockUI
(or block
) function.
Global Overrides
You can change the default options by simply declaring different values for them. For example:
// change message border
$.blockUI.defaults.css.border = '5px solid red';
// make fadeOut effect shorter
$.blockUI.defaults.fadeOut = 200;
Local Overrides
Local overrides are achieved by passing an object to the
blockUI
(or
block
) function. The
exact same options are available to the local options object as are available in the global object. For example:
// change message border
$.blockUI({ css: { border = '5px solid red'} });
...
// make fadeOut effect shorter
$.blockUI({ fadeOut: 200 });
...
// use a different message
$.blockUI({ message: 'Hold on!' });