Easyui 遮罩实现方式

项目中在提交Ajax请求时，后台处理数据时间有点长，需要一个遮罩，就随便找了一个实现一下：包含两种方式，个人比较喜欢第二种

第一种：

$("#saveMaterial").click(function(){

            $.messager.progress({

                title:'请稍后',

                msg:'数据保存中...'

            });

            var url = PREFIX_LOCATION+"/cpv3MaterialCtrl/saveMaterial";

            var params = {

                "quotationId":quotationId,

                "universities":QUOTATIONMATERIAL.universities,

                "universityChange":QUOTATIONMATERIAL.universityChange

            };

            $.post(url,{params:JSON.stringify(params)},function(data){

                if(data && data.flag) {

                    QUOTATIONMATERIAL.universities = [];

                    opener.CostPage.initAndRefresh(true);

                    $.messager.progress('close');//处理完成之后关闭

                    $.messager.alert("操作提示",data.message,"info", function() {

                        window.close();

                    });

                } else {

                    $.messager.progress('close');

                    $.messager.alert("操作提示",data.message,"error");

                }

            },"json");

        });

效果如图：

第二种：

$.messager.confirm("提示","确认要生成版本么？",function(action){

        if(action){

            $("<div id=\"procss\" class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");

            $("<div id=\"procssMark\" class=\"datagrid-mask-msg\"></div>").html("正在生成报价单版本...").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});

            /*$.messager.progress({

                title:'请稍后',

                msg:'正在生成报价单版本...'

            });*/

        $.ajax({

            url : '${ctx}/cpv3QuotationCtrl/createVersion?projectId='+projectId+'&quotationId='+data[0].QUOTATION_ID,

            type : "get",

            cache : false,

            success : function(back) {

                if (back.flag) {

                    //$.messager.progress('close');

                    $("#procss").remove();//处理完之后移除

                    $("#procssMark").remove();//处理完成之后移除

                    $.messager.alert("提示信息","版本创建成功!","info");

                    $("#personManage").datagrid("reload");

                } else {

                    alert(back.message);

                }

            },

            error : function(back) {

                CDialog("操作失败:ajax返回异常");

            }

        });

    }

    })

效果如图