jQuery遮罩插件jQuery.blockUI.js简介

概述：

jQuery BlockUI插件可以在不锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会阻止用户在页面进行的操作，直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。

使用jQuery BlockUI，首先需要添加插件js源码的引用：

<script src="http://malsup.github.io/min/jquery.blockUI.js" type="text/javascript" ></script>

使用方法:

用法很简单， 阻止用户对页面的交互(锁定界面)：$.blockUI();

使用自定义信息阻塞UI（解除锁定界面）：$.unblockUI();

若计划使用缺省设置对所有的ajax请求均使用UI遮罩，只需添加下面的语句就可以实现：   

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); 

         实际应用举例:

 

$(".lasy-btn").click(function(){
var verifiyCode = $("input[name='yzm']").val();
$.ezAjax.get({
"url":"${ctx}/service/vfCode/validate.do?vfCode="+verifiyCode+"&seq=001",
success: function (data){
if("succeed"==data.result){
    if(validator.form()){
    regiserValidateKeyname();
}else{
$.unblockUI();
LG.showError("校验失败，请检查！ ");
}
}else{
$("#btnLogin").attr("disabled", false);
showVfCodeErr("验证码输入错误！");
            $("#yzm").focus();
}
},
       beforeSend: function ()
       {
        $.blockUI({
        message:"<h1 id=\"waitTip\" style=\"font-size:12px\">正在进行用户注册，请稍后。。。</h1>",
        css:{
            border: 'none', 
                   padding: '15px', 
                   width:"300px", 
                   cursor:'default',
                   opacity: 0.5, 
                   "z-index":'99999999999',
                   background:'black',
                   color:'#fff'
        },
        overlayCSS:{
        cursor:'default'
        }
        });
       }
});
});