javascript - blockui $.unblockUI() not working -

I am working on a very simple model using blockUI which pops up and asks if any user Whether or not a certain age. To avoid conflict, I always try to develop a piece of code in my page, and that's what I have done here. I have a simple HTML / Javascript page and it is not working as much as you want.

When the page loads, it comes right. However, when trying to unblock (even without using the button) it does nothing and it just sits with the loading icon.

  & lt; Html & gt; & Lt; Top & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "jquery.blockUI.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {// A bit of work around. BlockUI tries to center based on // div. By adding block of html tag immediately, From ($ message: $ ('message'), centerX: true, centerY: true, CSS: {width: '600px', height: '300px', range: '3px solid # FF9900 ', background color:' # 000 ', color:' #fff ', padding:' 25px '}}) $ (' # over '). Click (function () {Warning (' clicked! ' ); $ Undocked ui (); return returned;}); $ (under '#'). Function () {$. UnblockUI (); return returned;});}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "message" style = "display: none;" & Gt; & Lt; Img src = "logo.png" range = "0" /> & Lt; Br / & gt; & Lt; H1>! Welcome & lt; / H1> You can not see this page until you are 21 or older. & Lt; Br / & gt; & Lt; Button id = "over" & gt; I'm 21 or more & lt; / Button & gt; & Amp; Nbsp; & Amp; Nbsp; & Amp; Nbsp; & Lt; Button ID = "Down" & gt; 21 & lt; / Button & gt; & Lt; / Div & gt; It's dusty down here! I should be seen! & Lt; / Body & gt; & Lt; / Html & gt;   
 There is no error in Chrome's console, I can not really get any reason so that it should not be closed.   
 
 
 When you call,  $ UnblockUI ()  Try calling it on an element, e.g.  $ ('html'). Unblock (); :  
  & lt; Div class = "body" & gt; & Lt; Div id = "message" style = "display: none;" & Gt; & Lt; Img src = "logo.png" range = "0" /> & Lt; Br / & gt; & Lt; H1>! Welcome & lt; / H1> You can not see this page unless you're 21 or more & lt; Br / & gt; & Lt; Button id = "over" & gt; I have 21 or more & lt; / Button & gt; & Amp; Nbsp; & Amp; Nbsp; & Amp; Nbsp; & Lt; Button ID = "Down" & gt; 21 & lt; / Button & gt; & Lt; / Div & gt; It's dusty down here! I should be seen! & Lt; / Div & gt;   
 JS will be:  
  $ ('body'). Block ({message: $ ('# message'), centerX: true, centerY: true, css: {width: '600px', height: '300px', range: '3px solid # FF9900', background color: '# 000 ', color:' #fff ', padding:' 25px '}}); Click $ ('# over') (function () {warning ('clicked!'); $ ('. Body'). Unblock (); Return;}); $ ('Under #') Click (function () {$ ('. Body'). Unblock (); return false;});   
 See example:  
 Read more about  element blocking  here: