Easyui Masking Implementation Method

Project in the submission of AJAX requests, the background processing data time is a bit long, need a mask, just find a realization: There are two ways, personal preferred the second kind

The first type:

$ ("#saveMaterial"). Click (function() { $.messager.progress ({title: ' Please later ', msg: ' Data saved in ... '}; varurl = prefix_location+ "/cpv3materialctrl/savematerial"; varparams = {                "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 ');//close after processing is complete$.messager.alert ("Action Tip", Data.message, "info",function() {window.close ();                }); } Else{$.messager.progress (' Close '); $.messager.alert ("Action Tip", Data.message, "error"); }            },"JSON"); });

Effect

The second type:

$.messager.confirm ("Prompt", "Are you sure you want to build the version?") ",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 ("Generating quote version ..."). AppendTo ("Body") . CSS ({display: "Block", Left: ($ (document.body). Outerwidth (True)-$)/2,top: ($ (window). Height ()-2});             /*$.messager.progress ({title: ' Please later ', msg: ' Generating quote version ... '});*/$.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 ();//After processing is finished removing $ ("#procssMark" ). Remove ();//$.messager.alert after processing is complete ("Prompt Message", "Version created successfully!", "info"); $("#personManage"). DataGrid ("Reload")); } Else{alert (back.message); }}, Error:function(back) {CDialog ("Operation failed: Ajax returned exception");    }        }); }    })

Effect

Easyui Matte Implementation