| |
Login Form |
$(document).ready(function() {
$('#demo1').click(function() {
$.blockUI({ message: $('#loginForm') });
setTimeout($.unblockUI, 2000);
});
});
|
| |
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);
});
});
|
| |
Blue Overlay |
$(document).ready(function() {
$('#demo3').click(function() {
$.blockUI({ overlayCSS: { backgroundColor: '#00f' } });
setTimeout($.unblockUI, 2000);
});
});
|
| |
Tall Content |
$(document).ready(function() {
$('#demo4').click(function() {
$.blockUI({
message: $('#tallContent'),
css: { top: '20%' }
});
setTimeout($.unblockUI, 2000);
});
});
|
| |
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);
});
});
|
| |
Non-centered message |
$(document).ready(function() {
$('#demo6').click(function() {
$.blockUI({
centerY: 0,
css: { top: '10px', left: '', right: '10px' }
});
setTimeout($.unblockUI, 2000);
});
});
|
| |
Blocking without a message
(pass null as message) |
$(document).ready(function() {
$('#demo7').click(function() {
$.blockUI({ message: null });
setTimeout($.unblockUI, 2000);
});
});
|
| |
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);
});
});
|
| |
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);
});
});
|
| |
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
});
});
});
|
| |
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'
}
});
});
});
|
| |
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.
|
| |
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
});
});
});
For more details on using this feature see theme.html
|
| |
onBlock callback |
$(document).ready(function() {
$('#demo14').click(function() {
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
alert('Page is now blocked; fadeIn complete');
}
});
});
});
|
