BlockUI example

HTML

<script src="http://malsup.github.com/jquery.blockUI.js"></script>
<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>&nbsp;&nbsp;&nbsp;
        <button id="under">Under 21</button>
    </div>It's dusty under here! Let me be seen!</div>

JavaScript

// 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.
$('.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;
});
$('.blockUI').css('cursor', 'default');