Page blocking
<button id="block-page" class="mr-2 btn btn-primary">Block the whole page</button> $('#block-page').on('click', function() { $.blockUI({ message: '<svg> ... </svg>', fadeIn: 800, timeout: 2000, //unblock after 2 seconds overlayCSS: { backgroundColor: '#1b2024', opacity: 0.8, zIndex: 1200, cursor: 'wait' }, css: { border: 0, color: '#fff', zIndex: 1201, padding: 0, backgroundColor: 'transparent' } }); });
Layout area blocking
<button id="block-content" class="mr-2 btn btn-primary message">Layout area blocking</button> $('#block-content').on('click', function() { var block = $('#reload'); $(block).block({ message: '<svg> ... </svg>', timeout: 2000, //unblock after 2 seconds overlayCSS: { backgroundColor: '#000', opacity: 0.8, cursor: 'wait' }, css: { border: 0, color: '#fff', padding: 0, backgroundColor: 'transparent' } }); });
Growl
BlockUI Growl Notification
<button id="block-growl" class="mr-2 btn btn-primary message">Growl</button> <div class="blockui-growl-message"> <i class="flaticon-exclamation"></i> BlockUI Growl Notification </div> // 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, } }); });
Message position
<button id="message-position" class="mr-2 btn btn-primary">Message position</button> $('#message-position').on('click', function() { var block = $('#m-s-reload'); $(block).block({ message: '<svg> ... </svg>', timeout: 2000, //unblock after 2 seconds centerX: 0, centerY: 0, overlayCSS: { backgroundColor: '#fff', opacity: 0.8, cursor: 'wait' }, css: { width: 35, top: '15px', left: '', right: '10px', bottom: 0, border: 0, padding: 0, backgroundColor: 'transparent' } }); });
Auto Unblocking
<button id="auto-unblock" class="mr-2 btn btn-primary">Auto Unblock</button> $('#auto-unblock').on('click', function() { var block = $('#a-u-reload'); $(block).block({ message: '<svg> ... </svg>', timeout: 2000, //unblock after 2 seconds overlayCSS: { backgroundColor: '#fff', opacity: 0.8, cursor: 'wait' }, css: { border: 0, padding: 0, backgroundColor: 'transparent' } }); });
onBlock callback
<button id="block-callback" class="mr-2 btn btn-primary">onBlock callback</button> $('#block-callback').on('click', function() { $.blockUI({ message: '<svg> ... </svg>', fadeIn: 800, timeout: 2000, //unblock after 2 seconds overlayCSS: { backgroundColor: '#1b2024', opacity: 0.8, zIndex: 1200, cursor: 'wait' }, css: { border: 0, color: '#fff', zIndex: 1201, padding: 0, backgroundColor: 'transparent' }, onBlock: function() { alert('Page is now blocked. FadeIn completed.'); } }); });
Block with default message
<button id="default-message" class="mr-2 btn btn-primary">Default Message</button> $('#default-message').on('click', function() { var block = $('#d-t-reload'); $(block).block({ message: '<span class="text-semibold">Please wait...</span>', timeout: 2000, //unblock after 2 seconds overlayCSS: { backgroundColor: '#fff', opacity: 0.8, cursor: 'wait' }, css: { border: 0, padding: 0, color: '#e7515a', backgroundColor: 'transparent' } }); });
Message Animation
<button class="mr-2 btn btn-primary" id="message-animation" data-animation="fadeInDown">Message Animation</button> <div class="blockui-animation-container"> <span class="text-semibold"><svg> ... </svg></span> </div> $('#message-animation').on('click', function() { var block = $(this).parent(); $(block).block({ message: $('.blockui-animation-container'), timeout: 3000, //unblock after 3 seconds overlayCSS: { backgroundColor: '#fff', opacity: 0.8, cursor: 'wait' }, css: { width: 36, height: 36, color: '#000', 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
Modal title
<button class="mr-2 btn btn-primary message" data-toggle="modal" data-target="#exampleModal">Modal</button> $('#modal-blockui').on('click', function() { var block = $('#modal-reload'); $(block).block({ message: '<svg> ... </svg>', showOverlay: false, timeout: 2000, //unblock after 2 seconds css: { border: 0, color: '#000', padding: 0, backgroundColor: 'transparent' } }); });
Custom Overlay
<button id="overlay-custom" class="mr-2 btn btn-primary">Overlay</button> $('#overlay-custom').on('click', function() { var block = $('#custom-overlay'); $(block).block({ message: '<svg> ... </svg>', timeout: 2000, //unblock after 2 seconds overlayCSS: { backgroundColor: '#515365', opacity: 0.9, cursor: 'wait' }, css: { border: 0, padding: 0, color: '#fff', backgroundColor: 'transparent' } }); });
Custom Style
<button id="custom-message" class="mr-2 btn btn-primary">Custom</button> $('#custom-message').on('click', function() { var block = $('#c-style'); $(block).block({ message: '<span class="text-semibold"><svg> ... </svg></i> Updating data</span>', timeout: 2000, //unblock after 2 seconds overlayCSS: { backgroundColor: '#fff', opacity: 0.8, cursor: 'wait' }, css: { border: 0, padding: '10px 15px', color: '#fff', width: 'auto', '-webkit-border-radius': 2, '-moz-border-radius': 2, backgroundColor: '#0e1726' } }); });
Multiple Message
Loading
<button id="multiple-messages" class="mr-2 btn btn-primary">Multiple</button> <div class="multiMessageBlockUi"> <i class="flaticon-circle-reload-line spin"></i> <span class="text-semibold display-block">Loading</span> </div> $('#multiple-messages').on('click', function() { var message = $(this).next('.multiMessageBlockUi'); var block = $(this).parent(); $(block).block({ message: message, overlayCSS: { backgroundColor: '#fff', 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('<svg> ... </svg> <span class="text-semibold display-block">Loading</span>') }, 0); window.setTimeout(function () { message.html('<svg> ... </svg> <span class="text-semibold display-block">Please wait</span>') }, 2000); window.setTimeout(function () { message.addClass('bg-danger').html('<i class="flaticon-danger-3"></i> <span class="text-semibold display-block">Load error</span>') }, 4000); window.setTimeout(function () { $(block).unblock({ onUnblock: function(){ message.removeClass('bg-danger'); } }); }, 6000); });