blockui $.unblockUI() not working
I've been working on a very simple modal using blockUI that pops up and asks if a user is of a certain age. I always try to develop a piece of code in it's own page first to avoid conflicts, and that's what I've done here. I've got one simple html/javascript page and it's not functioning as it should.
Whenever the page loads, it comes up just fine. However, when trying to unblock (even without using buttons) it doesn't do anything. It just sits there with the loading icon.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// A bit of a work-around. BlockUI tries to center based on location of
// the div. By attaching block to the html tag immediately, we avoid
// this issue completely.
$('html').block({
message: $('#message'),
centerX: true,
centerY: true,
css: {
width: '600px',
height: '300px',
border: '3px solid #FF9900',
backgroundColor: '#000',
color: '#fff',
padding: '25px'
}
});
$('#over').click(function() {
alert('clicked!');
$.unblockUI();
return false;
});
$('#under').click(function() {
$.unblockUI();
return false;
});
});
</script>
</head>
<body>
<div id="message" style="display:none;">
<img src="logo.png" border="0" />
<br />
<h1>Welcome!</h1>
You may not view this page unless you are 21 or over.<br />
<button id="over">I am 21 or over</button> <button id="under">Under 21</button>
</div>
It's dusty under here! Let me be seen!
</body>
</html>
No errors show up in Chrome's console, I can't really find a reason why this shouldn't close.
Answer
When you call $.unblockUI() try calling it on an element instead, eg. $('html').unblock();:
<div class="body">
<div id="message" style="display:none;">
<img src="logo.png" border="0" />
<br />
<h1>Welcome!</h1>
You may not view this page unless you are 21 or over.
<br />
<button id="over">I am 21 or over</button>
<button id="under">Under 21</button>
</div>
It's dusty under here! Let me be seen!
</div>
The JS would be:
$('.body').block({
message: $('#message'),
centerX: true,
centerY: true,
css: {
width: '600px',
height: '300px',
border: '3px solid #FF9900',
backgroundColor: '#000',
color: '#fff',
padding: '25px'
}
});
$('#over').click(function () {
alert('clicked!');
$('.body').unblock();
return false;
});
$('#under').click(function () {
$('.body').unblock();
return false;
});
See working example: http://jsfiddle.net/amyamy86/Taw83/
Read more about Element Blocking here: http://www.malsup.com/jquery/block/#element