除非我先显示警报，否则jQuery blockUI无法正常工作 [英] JQuery blockUI doesn't work unless I show an alert first

问题描述

我无法使JQuery blockUI正常工作.我正在使用此代码:

I'm having troubles getting JQuery blockUI to work. I'm using this code:

$.blockUI({
    message : null,
    overlayCSS : {
        backgroundColor : '#000000;',
        opacity : .4
    }
});

如果我只调用上面的代码，然后再调用下面的sleep函数，我将得到以下行为: 5秒钟没有任何反应 方块闪烁

If I just call the above and then call the sleep function below I get the following behavior: Nothing happens for 5 seconds The block flashes

var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > 5000) {
        break;
    }
}

如果我运行以下代码:

alert("foo");
$.blockUI({
    message : null,
    overlayCSS : {
        backgroundColor : '#000000;',
        opacity : .4
    }
});
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > 5000) {
        break;
    }
}
alert("bar");

我得到以下行为:

• 警报和阻止出现(我可以无限期等待，直到我清除警报为止)

• The alert and the block appear (I can wait indefinitely before I clear the alert)

清除警报按钮后5秒钟没有任何反应

When I clear the alert button nothing happens for 5 seconds

警报将切换到栏"消息

当我关闭警报时，警报和阻止程序将清除

The alert and the blocker clear when I dismiss the alert

推荐答案

我最终将交互的睡眠"部分移到服务器上，并在客户端上使用了类似的东西:

I ended up moving the "sleep" part of the interaction to the server and used something like this on the client:

<header>
    <script language="javascript">
        function blockExample() {
            // block the ui
            $.blockUI({
                message : null,
                overlayCSS : {
                    backgroundColor : '#00f'
                }
            });
            // do the ajax call
            $.ajax({
                url : "${home}/action/wait/WaitAction?howLong=5000",
                type : "get",
                success : function(data) {
                    $.unblockUI();
                },
                error : function() {
                    alert("error");
                }
            });
        }
    </script>
</header>

<div align="center">
    <a href="javascript:blockExample()">Click me to block this page for 5 seconds</a>
</div>

这篇关于除非我先显示警报，否则jQuery blockUI无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！