blockui $.unblockUI() not working

StackOverflow https://stackoverflow.com/questions/15646794

문제

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.

도움이 되었습니까?

해결책

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top