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

Question

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

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