Js screen lock solution implementation through encapsulation of $. ajax _ javascript skills

Js screen lock solution is implemented by encapsulating $. ajax. If you need it, you can refer to the jquery plug-in source code:

/*** For $. ajax is encapsulated to add the lock function * isAsync for asynchronous requests. The default value is true * isLock for lock, and the default value is true * isCache for loading information from the browser cache, the default value is fasle ***/; (function ($) {$. fn. doPost = function (settings) {settings = jQuery. extend ({isAsync: true, type: "post", url: null, dataType: null, data: null, success: null, error: toError, isLock: true, isCache: false}, settings); $ (this ). each (function () {if (settings. isLock) {lockSrc () ;}$. ajax ({async: sett Ings. isAsync, type: settings. type, url: settings. url, dataType: settings. dataType, data: settings. data, cache: settings. isCache, success: function (msg) {if (settings. isLock) {unlockSrc ();} settings. success (msg) ;}, error: settings. error}) ;}); // lock method function lockSrc () {$ (". lockDiv "mirror.css ({" opacity ":" 0.5 "}). fadeIn ('normal'); var scrollWidth = document.doc umentElement. clientWidth; // document. body. clientWidth; var scrollHeig Ht upload document.doc umentElement. clientHeight; // document. body. clientHeight; var pWidth = $ (". lockDivInfo "). width (); var pHeight = $ (". lockDivInfo "). height (); var pLeft = scrollWidth/2-pWidth/2; var pTop = scrollHeight/2-pHeight/2; // console. log ("bodyWidth =" + scrollWidth + ", bodyHeight =" + scrollHeight + ", pHeight =" + pHeight + ", pWidth =" + pWidth + ", left = "+ pLeft +", top = "+ pTop); $ (". lockDivInfo ").css ({" position ":" absolut E "," top ": pTop," left ": pLeft }). fadeIn ('normal');} // function unlockSrc () {$ (". lockDivInfo "). fadeOut ('normal'); $ (". lockDiv "). fadeOut ('normal');} function toError () {alert ("operation failed! ") ;};}) (JQuery );

Lock screen style:

/* Lock screen */. lockDiv {width: 100%; height: 100%; display: none; z-index: 10; background-color: # DFE8F6; position: absolute; top: 0px; left: 0px ;}. lockDivInfo {width: 50px; height: 2px; display: none; position: absolute; left: 0px; top: 0px; z-index: 11} # CloseDiv {float: right; width: 100px; height: 100px; margin-top: 10px; margin-right: 10px ;}

Usage

// Query $ ("# queryBtn "). click (function () {selecCheckByRegionApp. query () ;}); var selecCheckByRegionApp ={}; selecCheckByRegionApp. query = function () {var settion = {type: "post", url: 'selfcheckstatisticaction! FindByRegion ', dataType: "text", data: $ ("# searchForm "). formSerialize (), success: function (msg) {$ ("# contentDiv" ).html (msg) ;};$ ("# queryBtn "). doPost (settion );}