using jquery for modal asp.net ajax udate progress

Question

I have asp.net UpdatePanel and UpdateProgress controls on my form . I'm trying to make Update progress modal by jQuery BlockUI Plugin or jquery itself .

the $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); doesn't work , Because I'm using UpdatePanel and Server-Side ASP.NET ajax .

I've noticed in Partial postback just UpdateProgress disply style change from display: none to display: block

So I'm wondering if there is any style changing event in jquery to call $.blockUI(); or any other solution in order to use jQuery BlockUI Plugin with asp.net updatepanel and UpdateProgress

Answer 1

Place this script below the ScriptManager control:

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(initializeRequest);
    prm.add_pageLoaded(pageLoaded);

    var blockTimeout = null;

    function initializeRequest(sender, args) {
        blockTimeout = window.setTimeout($.blockUI, 500);
    }

    function pageLoaded(sender, args) {
        clearTimeout(blockTimeout);
        $.unblockUI();
    }
</script>

Timeout allows to avoid blocking page for very short async requests.