jQuery BlockUI Plugin Demo

1.Login Form

$(document).ready(function() {
$('#demo1').click(function() {
$.blockUI({ message: $('#loginForm') });

setTimeout($.unblockUI, 2000);
});
});

2.iPhoto (ish)

$(document).ready(function() {
$('#demo2').click(function() {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });

setTimeout($.unblockUI, 2000);
});
});

3.Blue Overlay

$(document).ready(function() {
$('#demo3').click(function() {
$.blockUI({ overlayCSS: { backgroundColor: '#00f' } });

setTimeout($.unblockUI, 2000);
});
});

4.Tall Content

$(document).ready(function() {
$('#demo4').click(function() {
$.blockUI({
message: $('#tallContent'),
css: { top: '20%' }
});

setTimeout($.unblockUI, 2000);
});
});

5.Image Box

$(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);
});
});

6.Non-centered message

$(document).ready(function() {
$('#demo6').click(function() {
$.blockUI({
centerY: 0,
css: { top: '10px', left: '', right: '10px' }
});

setTimeout($.unblockUI, 2000);
});
});

7.Blocking without a message (pass null as message)

$(document).ready(function() {
$('#demo7').click(function() {
$.blockUI({ message: null });

setTimeout($.unblockUI, 2000);
});
});

8.onUnblock callback (useful when using fadeOut option as it is invoked when all the blocking elements have been removed)

$(document).ready(function() {
$('#demo8').click(function() {
$.blockUI();

setTimeout(function() {
$.unblockUI({
onUnblock: function(){ alert('onUnblock'); }
});
}, 2000);
});
});

9.Click overlay to unblock (This demo will not automatically unblock, you must click the overlay.)

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

10.Auto-Unblock Sets a timer to unblock after a specified timeout.

$(document).ready(function() {
$('#demo10').click(function() {
$.blockUI({
message: '<h1>Auto-Unblock!</h1>',
timeout: 2000
});
});
});

11.Growl (the hard way)

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

12.Growl (the easy way)

$(document).ready(function() {
$('#demo12').click(function() {
$.growlUI('Growl Notification', 'Have a nice day!');
});
});

The two growl examples above also make use of the following external CSS:

div.growlUI { background: url(check48.png) no-repeat 10px 10px }
div.growlUI h1, div.growlUI h2 {
color: white; padding: 5px 5px 5px 75px; text-align: left
}

Note: For a more full-featured "growl" implementation, check out the excellent jGrowl plugin by Stan Lemon.

13.jQuery UI Theme. Use jQuery UI themes to style the messaege

$(document).ready(function() {
$('#demo13').click(function() {
$.blockUI({
theme:     true,
title:    'This is your title',
message:  '<p>This is your message.</p>',
timeout:   2000
});
});
});

14.onBlock callback

$(document).ready(function() {
$('#demo14').click(function() {
$.blockUI({
fadeIn: 1000,
timeout:   2000,
onBlock: function() {
alert('Page is now blocked; fadeIn complete');
}
});
});
});

15.onOverlayClick callback

//Click overlay to unblock.
$(document).ready(function() {
$('#demo15').click(function() {
$.blockUI({
onOverlayClick: $.unblockUI
});
});
});

参考：http://malsup.com/jquery/block/#overview