BlockUI extension
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 card 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 card

                        
											/* Block the card on button click */
											$('#block-card').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