JQuery Blockui Plugin Demo

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