$('#block-page').on('click', function() {
$.blockUI({
message: '',
fadeIn: 800,
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#191e3a',
opacity: 0.8,
zIndex: 1200,
cursor: 'wait'
},
css: {
border: 0,
color: '#25d5e4',
zIndex: 1201,
padding: 0,
backgroundColor: 'transparent'
}
});
});
$('#block-content').on('click', function() {
var block = $('#reload');
$(block).block({
message: '',
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#191e3a',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
color: '#25d5e4',
padding: 0,
backgroundColor: 'transparent'
}
});
});
// Growl notification
$('#block-growl').on('click', function() {
$.blockUI({
message: $('.blockui-growl-message'),
fadeIn: 700,
fadeOut: 700,
timeout: 3000, //unblock after 3 seconds
showOverlay: false,
centerY: false,
css: {
width: '250px',
backgroundColor: 'transparent',
top: '20px',
left: 'auto',
right: '20px',
border: 0,
opacity: .95,
zIndex: 1200,
}
});
});
// Custom message position
$('#message-position').on('click', function() {
var block = $('#m-s-reload');
$(block).block({
message: '',
timeout: 2000, //unblock after 2 seconds
centerX: 0,
centerY: 0,
overlayCSS: {
backgroundColor: '#191e3a',
opacity: 0.8,
cursor: 'wait'
},
css: {
width: 35,
top: '15px',
left: '',
right: '10px',
bottom: 0,
color: '#25d5e4',
border: 0,
padding: 0,
backgroundColor: 'transparent'
}
});
});
// Auto unblock
$('#auto-unblock').on('click', function() {
var block = $('#a-u-reload');
$(block).block({
message: '',
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#191e3a',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
color: '#25d5e4',
backgroundColor: 'transparent'
}
});
});
// Block callback
$('#block-callback').on('click', function() {
$.blockUI({
message: '',
fadeIn: 800,
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#191e3a',
opacity: 0.8,
zIndex: 1200,
cursor: 'wait'
},
css: {
border: 0,
color: '#25d5e4',
zIndex: 1201,
padding: 0,
backgroundColor: 'transparent'
},
onBlock: function() {
alert('Page is now blocked. FadeIn completed.');
}
});
});
// Default message
$('#default-message').on('click', function() {
var block = $('#d-t-reload');
$(block).block({
message: 'Please wait...',
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#191e3a',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
color: '#25d5e4',
backgroundColor: 'transparent'
}
});
});
// Custom message animation
$('#message-animation').on('click', function() {
var block = $(this).parent();
$(block).block({
message: $('.blockui-animation-container'),
timeout: 3000, //unblock after 3 seconds
overlayCSS: {
backgroundColor: '#191e3a',
opacity: 0.8,
cursor: 'wait'
},
css: {
width: 36,
height: 36,
color: '#25d5e4',
border: 0,
padding: 0,
backgroundColor: 'transparent'
}
});
var animation = $(this).data("animation");
$('.blockui-animation-container').addClass("animated " + animation).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
$(this).removeClass("animated " + animation);
});
});
// Modal Blockui
$('#modal-blockui').on('click', function() {
var block = $('#modal-reload');
$(block).block({
message: '',
showOverlay: false,
timeout: 2000, //unblock after 2 seconds
css: {
border: 0,
color: '#25d5e4',
padding: 0,
backgroundColor: 'transparent'
}
});
});
// Custom Overlay
$('#overlay-custom').on('click', function() {
var block = $('#custom-overlay');
$(block).block({
message: '',
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#515365',
opacity: 0.9,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
color: '#fff',
backgroundColor: 'transparent'
}
});
});
// Custom message
$('#custom-message').on('click', function() {
var block = $('#c-style');
$(block).block({
message: ' Updating data',
timeout: 2000, //unblock after 2 seconds
overlayCSS: {
backgroundColor: '#191e3a',
opacity: 1,
cursor: 'wait'
},
css: {
border: 0,
padding: '10px 15px',
color: '#0e1726',
width: 'auto',
'-webkit-border-radius': 2,
'-moz-border-radius': 2,
backgroundColor: '#009688'
}
});
});
// Multiple messages
$('#multiple-messages').on('click', function() {
var message = $(this).next('.multiMessageBlockUi');
var block = $(this).parent();
$(block).block({
message: message,
overlayCSS: {
backgroundColor: '#191e3a',
opacity: 0.8,
cursor: 'wait'
},
css: {
width: 100,
'-webkit-border-radius': 2,
'-moz-border-radius': 2,
border: 0,
padding: 0,
backgroundColor: 'transparent'
},
onBlock: function(){
clearTimeout();
}
});
window.setTimeout(function () {
message.html(' Loading')
}, 0);
window.setTimeout(function () {
message.html(' Please wait')
}, 2000);
window.setTimeout(function () {
message.addClass('bg-danger').html(' Load error')
}, 4000);
window.setTimeout(function () {
$(block).unblock({
onUnblock: function(){
message.removeClass('bg-danger');
}
});
}, 6000);
});