#### Extensions - BlockUI

Statistics Invoices Schedule

##### 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

BlockUI Growl Notification

###### 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

Loading

###### Block with default message

Displays default text message, no spinner

###### Multiple messages

Multiple messages with different styles

Loading

###### 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