Jquery blockUI不工作

我有下面的代码，我正在使用blockui，但它没有阻止页面。我正在使用ajax调用获取用户控制结果（部分视图）以加载到页面中的div中。在ajax调用期间，我希望使用blockui阻止整个页面

 $('#btnGO').click(function() {


        if (validate()) {
            alert("loading");
            $.blockUI({ message: '<img src="/Content/images/ajax-loader.gif"/>' }); //this is not working

            $.ajax({

                type: "POST",
                url: "/Controller/action/", //to get the partial view
                async: false,
                cache: false,
                beforeSend: function() {

                },
                complete: function() {
                    alert("ajax complete event")
                    $.unblockUI(); 
                },

                data: $('#frmPassBook').serialize(),
                error: function(xhr, status, error) {
                    $('#ErrorMessage').html(xhr.responseText);
                    $("#ErrorMessage").stop().show('slow');
                    $('#ui-widget').show();
                    $.unblockUI();
                },
                success: function(data) {
                    $("#aCBDetails").parent().show();
                    $("#divCBDetails").hide("blind");
                    $("#aCBDetails span:first").removeClass("ui-icon-circle-triangle-n").addClass("ui-icon-circle-triangle-s");
                    $('#ui-widget').hide();
                   //loading html in div
                   $("#div").html(data);

if ($("#rbMain") != undefined) {

                        if ($("#rbMain").attr("checked")) {
                            $(".subTrId").hide();
                            $("#spSub").hide();
                            $("#spMain").show();

                        }
                        else {
                            $(".subTrId").show();
                            $("#spSub").show();
                            $("#spMain").hide();

                        }
                    } else {

                        $("#spSub").show();
                        $("#spMain").hide();
                    }

//unblocking after div is loaded with html
                   $.unblockUI();
                }
            });
        } else {

           $.unblockUI();

        }
        return false ;
    });

$（'#btnGO'）。单击（函数（）{
if（validate（））{
警报（“装载”）；
$.blockUI（{消息：'}）；//这不起作用
$.ajax({
类型：“POST”，
url:“/Controller/action/”，//获取部分视图
async:false，
cache:false，
beforeSend:function（）{
},
完成：函数（）{
警报（“ajax完成事件”）
$.unbui（）；
},
数据：$（'#frmPassBook'）。序列化（），
错误：函数（xhr、状态、错误）{
$（'#ErrorMessage'）.html（xhr.responseText）；
$（“#ErrorMessage”）.stop（）.show（'slow'）；
$（“#ui小部件”）.show（）；
$.unbui（）；
},
成功：功能（数据）{
$（“#aCBDetails”）.parent（）.show（）；
$（“#divCBDetails”）.hide（“blind”）；
$（“#acb详细信息span:first”）.removeClass（“ui-icon-circle-triangle-n”）.addClass（“ui-icon-circle-triangle-s”）；
$（“#ui小部件”）.hide（）；
//在div中加载html
$（“#div”）.html（数据）；
如果（$（“#rbMain”）！=未定义）{
如果（$（“#rbMain”）.attr（“选中”））{
$（“.subTrId”）.hide（）；
$（“#spSub”）.hide（）；
$（“#spMain”）.show（）；
}
否则{
$（“.subTrId”）.show（）；
$（“#spSub”）.show（）；
$（“#spMain”）.hide（）；
}
}否则{
$（“#spSub”）.show（）；
$（“#spMain”）.hide（）；
}
//使用html加载div后取消阻止
$.unbui（）；
}
});
}否则{
$.unbui（）；
}
返回false；
});

尝试使用jQuery的

ajaxStart

和

ajaxStop

方法。这将使您能够在ajax调用开始时应用loader，并在调用结束时将其删除。

使用baseZ索引来阻止整个页面 例如

$.blockUI（{
消息：“”，
baseZ:9000，
css:{
顶部：（$（窗口）.height（）-400）/2+“px”，
左：（$（窗口）.width（）-400）/2+“px”，
宽度：“400px”}
}); 

与其使用另一个插件来阻止UI，更简单的方法是绑定jquery中默认提供的ajaxStart和ajaxStop。感谢所有回复，但当我注释掉async:false时，它工作了！！！我也有类似的问题。注释掉async:false的原因很可能是因为它在调用block之后立即调用unblock，同时异步等待ajax调用完成。注释掉async:false将使ajax调用同步执行，因此处理将停止并等待ajax调用返回，然后再执行取消阻止。将其作为$.blockUI（{消息：“”，baseZ:9000，css:{顶部：（$（窗口）.height（）-400）/2+“px”，左侧：（$（窗口）.width（）-400）/2+“px”，width:“400px”}）；但它不起作用对不起……如果这个答案对你没有帮助，你为什么要接受呢？

$.blockUI({ 
                                            message: "<img src="/Content/images/ajax-loader.gif"/>",
                                            baseZ: 9000,
                                            css: { 
                                                top:  ($(window).height() - 400) /2 + "px", 
                                                left: ($(window).width() - 400) /2 + "px", 
                                                width: "400px"} 
});