Extensions - Block UI
BlockUI overview
The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser (Using the XMLHttpRequest object in synchronous mode causes the entire browser to lock until the remote call completes. This is usually not a desirable behavior). 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. By default blockUI message displays text inside a bordered frame. In this template default style is rotating spinner icon. Other message, overlay and plugin options you can find in demos below.
Sample markup
Sample examples of blocking user activity with the entire page and with content panel on button click. In both examples auto unblock is enabled for demonstration purposes and unblock specified containers in 2 seconds. In real final working version all containers can be unblocked when ajax activity stops. All styles for overlay and message are custom, default message displays text only.
Block the panel
/* Block the panel on button click */
$('#block-panel').on('click', function() {
var block = $(this).parent().parent();
$(block).block({
message: '<i class="icon-spinner4 spinner"></i>',
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'transparent'
}
});
});Block current page
/* Block current page on button click */
$('#block-page').on('click', function() {
$.blockUI({
message: '<i class="icon-spinner4 spinner"></i>',
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#1b2024',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
color: '#fff',
padding: 0,
backgroundColor: 'transparent'
}
});
});Blocking areas Block layout areas, content components or entire page
Whole page blocking
Block entire page using default options
Layout area blocking
Block layout areas using default options
Content component blocking
Block content components using default options
Overlay options Default and custom overlay options
Basic light overlay
Displays basic overlay with opacity
Custom overlay color
Displays custom background color in overlay
Full overlay cover
Displays fully opaque overlay
Display options Variations of message and overlay appearance
Block without message
Displays overlay only, message is empty
Block without overlay
Displays message only, overlay is hidden
Basic Growl example
Displays message and overlay as a Growl
Message options Default and custom options for messages
Block with spinner only
Displays animated spinner icon only, no text
Block with DOM element
Displays DOM element as a message
Block with default message
Displays default text message, no spinner
Multiple messages
Multiple messages with different styles
Block with custom message
Custom message with overlay and spinner
Message animation
Message animation using animate.css
Other options Message position and unblocking options
Message position
Displays custom message position
Auto unblocking
Demonstrates auto unblocking feature
Click to unblock
Click overlay to unblock the element
Callback methods On block, on unblock and on overlay click
onBlock callback
Invoked when blocking message is visible
onUnblock callback
Invoked when unblocking has completed
onOverlayClick callback
Invoked when blocking overlay is clicked