jQuery blockui $.unblockUI() 不工作

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15646794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:29:35  来源:igfitidea点击:

blockui $.unblockUI() not working

javascriptjqueryhtmlcssblockui

提问by Eric

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.

我一直在使用 blockUI 开发一个非常简单的模式,它会弹出并询问用户是否达到特定年龄。我总是尝试先在它自己的页面中开发一段代码以避免冲突,这就是我在这里所做的。我有一个简单的 html/javascript 页面,但它没有正常运行。

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.

Chrome 的控制台中没有显示任何错误,我真的找不到它不应该关闭的原因。

回答by Amy

When you call $.unblockUI()try calling it on an element instead, eg. $('html').unblock();:

当您调用时,请$.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>

The JS would be:

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;
});

See working example: http://jsfiddle.net/amyamy86/Taw83/

请参阅工作示例:http: //jsfiddle.net/amyamy86/Taw83/

Read more about Element Blockinghere: http://www.malsup.com/jquery/block/#element

在此处阅读有关元素阻止的更多信息:http: //www.malsup.com/jquery/block/#element