blockui $.unblockUI() not working

Eric picture Eric · Mar 26, 2013 · Viewed 28.3k times · Source

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>&nbsp;&nbsp;&nbsp;<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

Amy picture Amy · Mar 26, 2013

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>&nbsp;&nbsp;&nbsp;
        <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