1.Login Form
$ (document). Ready (function() { $ (' #demo1 '). Click (function() { $.blockui ({ Message: $ (' #loginForm ')}); );
2.iPhoto (ish)
$ (document). Ready (function() { $ (' #demo2 '). Click (function() { $.blockui ({ CSS: { ' none ', ' 15px ', ' #000 ', '-webkit-border-radius ': ' 10px ', '-moz-border-radius ': ' 10px ', opacity:. 5, ' #fff ' }}); );
3.Blue Overlay
$ (document). Ready (function() { $ (' #demo3 '). Click (function() { ' #00f ' } }); );
4.Tall Content
$ (document). Ready (function() { $ (' #demo4 '). Click (function() { $. Blockui ({ message: $ (' #tallContent '), ' 20% ' } }); );
5.Image Box
$ (document). Ready (function() { $ (' #demo5 '). Click (function() { $.blockui ({ message: $ (' #displayBox '), css: { top: -+)/2 + ' px ', left : ($ (window). Width ( )-(+)/2 + ' px ', width: ' 400px '} ); );
6.non-centered message
$ (document). Ready (function() { $ (' #demo6 '). Click (function() { $.blockui ({ 0, ' 10px ', left: ", right: ' 10px ' } }); );
7.Blocking without a message (pass NULL as message)
$ (document). Ready (function() { $ (' #demo7 '). Click (function() { Null }); );
8.onUnblock callback (useful when using fadeOut option as it was invoked when all the blocking elements has been removed)
$ (document). Ready (function() { $ (' #demo8 '). Click (function() { $.blockui () ; SetTimeout (function() { $.unblockui ({ function() {alert (' Onunblock ') ); } }); );
9.Click overlay to unblock (this demo won't 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 ({ ' , + });
11.Growl (The Hard)
$ (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)
$ (document). Ready (function() { $ (' #demo12 '). Click (function() { $.growlui ( ' Growl Notification ', ' had a nice day! ' );
The growl examples above also make use of the following external CSS:
{ background:}{ 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: ];}) ;
14.onBlock Callback
$ (document). Ready (function() { $ (' #demo14 '). Click (function() { $.blockui ( { $, timeout: +, function() { alert ( ' Page is now blocked; FadeIn complete ') ;});
15.onOverlayClick Callback
// Click overlay to unblock. $ (document). Ready (function() { $ (' #demo15 '). Click (function() { $.blockui ( { Onoverlayclick: $.unblockui }) ;
JQuery Blockui Plugin Demo