blockui $.unblockUI() не работает

Я работал над очень простым модальным окном с помощью blockUI, которое всплывает и спрашивает, достиг ли пользователь определенного возраста. Я всегда стараюсь сначала разработать фрагмент кода на отдельной странице, чтобы избежать конфликтов, и это то, что я сделал здесь. У меня есть одна простая страница html/javascript, и она не работает должным образом.

Всякий раз, когда страница загружается, она появляется просто отлично. Однако при попытке разблокировать (даже без использования кнопок) ничего не происходит. Он просто сидит там со значком загрузки.

<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>

В консоли Chrome не отображаются ошибки, я не могу найти причину, по которой это не должно закрываться.


javascript html jquery css blockui
person Eric    schedule 26.03.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Когда вы вызываете $.unblockUI(), попробуйте вместо этого вызвать его для элемента, например. $('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>

JS будет:

$('.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;
});

См. рабочий пример: http://jsfiddle.net/amyamy86/Taw83/.

Подробнее о блокировке элементов читайте здесь: http://www.malsup.com/jquery/block/#element

person Amy    schedule 26.03.2013
comment
Элемент I заблокировал фактическое начальное всплывающее окно, но не подумал разблокировать его таким же образом. Да! Спасибо! - person Eric; 27.03.2013