blockUI 使用小技巧

1.点击弹出层以外的区域关闭弹出层

$(document).ready(function() { 
    $('#demo9').click(function() { 
        $.blockUI(); 
        $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI); 
    }); 
}); 

2.blockUI弹出层定位

$(document).ready(function() {
    $('#demo5').click(function() {
        $.blockUI({
            message: $('#displayBox'),
            css: {
                top:  ($(window).height() - 400) /2 + 'px',
                left: ($(window).width() - 400) /2 + 'px',
                width: '400px'
            }
        });
 
        setTimeout($.unblockUI, 2000);
    });
});
3.在关闭blockUI的时候执行某个操作

$(document).ready(function() {
    $('#demo8').click(function() {
        $.blockUI();
 
        setTimeout(function() {
            $.unblockUI({
                onUnblock: function(){ alert('onUnblock'); }
            });
        }, 2000);
    });
});
4.弹出层自动定时，到时间后关闭

$(document).ready(function() {
    $('#demo10').click(function() {
        $.blockUI({
            message: '<h1>Auto-Unblock!</h1>',
            timeout: 2000
        });
    });
});
5.关闭blockUI时有淡出效果

$(document).ready(function() {
    $('#demo11').click(function() {
        $.blockUI({
            message: $('div.growlUI'),
            fadeIn: 700,
            fadeOut: 700,
            timeout: 2000,
            showOverlay: false,
            centerY: false,
            css: {
                width: '350px',
                top: '10px',
                left: '',
                right: '10px',
                border: 'none',
                padding: '5px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .6,
                color: '#fff'
            }
        });
    });
});
6.blockUI淡入，加载完成时执行某个函数

$(document).ready(function() {
    $('#demo14').click(function() {
        $.blockUI({
            fadeIn: 1000,
            timeout:   2000,
            onBlock: function() {
                alert('Page is now blocked; fadeIn complete');
            }
        });
    });   
});
参考：http://jquery.malsup.com/block/#demos