BlokUI的使用

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'); 
            } 
        }); 
    });    
});