L'esempio più semplice una volta importata la libreria del plugin e jQuery (almeno la versione 1.2.3) è il seguente:

$.blockUI();

questa renderà tutta la finestra bloccata e rimarrà bloccata fino al richiamo del metodo di sblocco.

$.unblockUI();

lo sblocco può naturalmente essere condizionato da una azione specifica dell'utente, dalla risposta ascincrona di una chiamata ajax o ad esempio temporizzata tramite il metodo setTimeout.

Questo plugin permette non solo di bloccare una pagina intera ma anche solo delle sezioni o elementi ben precisi, lasciando l'usabilità e il controllo del resto della pagina e bloccando quegli elementi critici per evitare eventuali chiamate doppie e non volute (per esempio in caso di chiamate asincrone).

Un esempio ben fatto lo trovate qui

A parte il pieno controllo sul lock è possibile personalizzare l'estetica dei messaggi, dal classico messaggio testuale a uno più complesso html / form.

Messaggio testuale:

$.blockUI({ message: 'Attendere..' });

Con codice html:

$.blockUI({ message: '<h1><img src="http://www.yousite.com/busy.gif" />
Attendere..</h1>' 
});

Con html e un form:

<script type="text/javascript">
$(document).ready(function() {

$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});

$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>Remote call in progress...</h1>" });

$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});

$('#no').click(function() {
$.unblockUI();
return false;
});

});
</script>

...

<input id="test" type="submit" value="Show Dialog" />

...

<div id="question" style="display:none; cursor: default">
<h1>Would you like to contine?.</h1>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>

Nell'ultimo esempio ci sono da notare alcune parti che non devono essere trascurati, il div question non deve essere visibile, in pratica a differenza dell'esempio precedente con Html, il codice html viene esplicitato nella pagina corrente e per non renderla erroneamente visibile viene impostato display:none.

Esiste la possibilità di inserire un form o comunque agganciare una chiamata di ritorno (callback) per eventuali eventi. Un esempio potrebbe essere che al termine dello sblocco viene richiamato un alert:

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

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