JQuery blockUI doesn't work unless I show an alert first

问题

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

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

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

If I run this code:

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

I get the following behavior:

The alert and the block appear (I can wait indefinitely before I clear the alert)
When I clear the alert button nothing happens for 5 seconds
The alert switches to the "bar" message
The alert and the blocker clear when I dismiss the alert

回答1:

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>

来源：https://stackoverflow.com/questions/41923667/jquery-blockui-doesnt-work-unless-i-show-an-alert-first

标签

javascript

jquery

jquery-blockui