Block the Page using Jquery BlockUI

         Following code is used to block the UI until some operation will not get complete. Advantage of this is that many time some operation takes too much time for execution, so if we block the UI user cant click on any page control until the operation gets complete. And also user easily understand  that some operation is going on so he/she has to wait for a time until UI gets unblock.

/*Add  following code on Jquery event to block the UI and also add Necessary script and css */


        $.blockUI({ overlayCSS: { backgroundColor: '#80B2FF'} });
        var opts = {
            lines: 13, // The number of lines to draw
            length: 20, // The length of each line
            width: 10, // The line thickness
            radius: 30, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            rotate: 0, // The rotation offset
            direction: 1, // 1: clockwise, -1: counterclockwise
            color: '#000', // #rgb or #rrggbb or array of colors
            speed: 1, // Rounds per second
            trail: 60, // Afterglow percentage
            shadow: false, // Whether to render a shadow
            hwaccel: false, // Whether to use hardware acceleration
            className: 'spinner', // The CSS class to assign to the spinner
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            position: 'fixed',
            top: '300', // Top position relative to parent in px
            left: '600' // Left position relative to parent in px
        };

/*Following code is used to unblock the UI depeding on condition or event. Here "foo" is the div which you want to block */
                 
                    $('#foo').hide();
                    $.unblockUI();