The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.
Usage is very simple; to block user activity for the page
JavaScript
$.blockUI();Blocking with a custom message:
JavaScript
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });Blocking with custom style:
JavaScript
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });To unblock the page:
JavaScript
$.unblockUI();If you want to use the default settings and have the UI blocked for all ajax requests, it's as easy as this:
JavaScript
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);Plugin Options
| Option | Default | Description |
|---|---|---|
message |
'<h1>Please wait...</h1>' | Message displayed when blocking (use null for no message) |
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 |
css |
{...} | Styles for the message when blocking; if you wish to disable these and use an external stylesheet then do this in your code |
themedCSS |
width, top, left | Minimal style set used when themes are used |
overlayCSS |
backgroundColor, opacity, cursor | Styles for the overlay |
cursorReset |
'default' | Style to replace wait cursor before unblocking to correct issue of lingering wait cursor |
growlCSS |
{} | Styles applied when using $.growlUI |
forceIframe |
false | Force usage of iframe in non-IE browsers (handy for blocking applets) |
baseZ |
1000 | z-index for the blocking overlay |
centerX |
true | Set to true to have the message automatically centered horizontally |
centerY |
true | Set to true to have the message automatically centered vertically |
allowBodyStretch |
true | Allow body element to be stretched in ie6; this makes blocking look better on "short" pages. Disable if you wish to prevent changes to the body height |
bindEvents |
true | Enable if you want key and mouse events to be disabled for content that is blocked |
constrainTabKey |
true | Be default blockUI will suppress tab navigation from leaving blocking content (if bindEvents is true) |
fadeIn |
200 | fadeIn time in millis; set to 0 to disable fadeIn on block |
fadeOut |
400 | fadeOut time in millis; set to 0 to disable fadeOut on unblock |
timeout |
0 | Time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock |
showOverlay |
true | Disable if you don't want to show the overlay |
focusInput |
true | If true, focus will be placed in the first available input field when page blocking |
onBlock |
null | Callback method invoked when fadeIn has completed and blocking message is visible |
onUnblock |
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 |
blockMsgClass |
'blockMsg' | Class name of the message block |
ignoreIfBlocked |
false | If it is already blocked, then ignore it (don't unblock and reblock) |
Refer following links for usage:
| Type | URL |
|---|---|
| Plugin Link | http://jquery.malsup.com/block/ |
| Github Page | https://github.com/malsup/blockui |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/add-on-block-ui.html |