I have been developing a simple modal using blockUI that appears and asks the user to confirm their age. To avoid conflicts, I always create a separate page for each code I work on. However, the current html/javascript page I created is not working as intended.
Upon loading the page, everything seems fine. But when attempting to unblock it (even without using buttons), nothing happens. The loading icon just remains there.
<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 workaround is needed here. 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 must be 21 or over to view this page.<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 are appearing in Chrome's console, making it difficult to pinpoint why the modal is not closing properly.