1、应用场景
在前台开发的过程中，经常需要用户在点击某个功能等待返回结果的时候，拒绝用户再次点击或进行其他操作。这时候就需要一个遮罩层遮挡用户的所有操作。
2、原理
在页面的body上追加一个覆盖整个浏览器的div，这个最上层的div遮挡住了其他所有能操作的功能。
3、js代码
var loadConfig ={ msgheight: 40,//遮罩层中间存在消息的和动图的div参数 msgwidth: 150, borderwidth: 0, //弹出边框宽度 bordercolor:"#7D98B8" //提示窗口的边框颜色};function loadwait(){//添加遮罩层 var pathName = window.document.location.pathname; pathName = pathName.substring(0, pathName.substr(1).indexOf('/')+1); var par = window.top; var iWidth = par.document.body.clientWidth; var iHeight = par.document.body.clientHeight; var bgObj = null; if(par != window){ bgObj = par.document.createElement("div"); bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:" + iWidth + "px;height:" + iHeight + "px;filter:Alpha(Opacity=30);opacity:0.3;background-color: #777;z-index:999998;"; bgObj.setAttribute("id", "divbg"); par.document.body.appendChild(bgObj); } var msgObj = par.document.createElement("div"); msgObj.style.cssText = "position:absolute;text-align:center;vertical-align:middle;font:12px '宋体';top:" + iHeight/ 2 + "px;left:" + (iWidth-loadConfig.msgwidth)/2 + "px;width:" + loadConfig.msgwidth + "px;height:" + loadConfig.msgheight + "px;text-align:center;border:"+loadConfig.borderwidth+"px solid " + loadConfig.bordercolor + ";padding:0px;z-index:999999;"; msgObj.setAttribute("id", "divmsg"); par.document.body.appendChild(msgObj); var msg = par.document.createElement("div"); msg.style.cssText = "float:right;text-align:left;padding-top: 7px;height:"+(loadConfig.msgheight-10)+"px;"; msg.innerHTML = "<font color='blue'>正在处理，请稍候...</font>"; msgObj.appendChild(msg); var msg2 = par.document.createElement("div"); msg2.style.cssText = "float:left;text-align:right;height:"+loadConfig.msgheight+"px;width:20px;"; msg2.innerHTML = "<img src='"+pathName+"/images/loading2.gif'/>"; msgObj.appendChild(msg2);}/** * 页面加载结束 */function loadend(){//去除遮罩层 var par = window.top; var divbg = par.document.getElementById("divbg"); if(divbg!=null&&divbg!=''){ par.document.body.removeChild(divbg); } var divmsg = par.document.getElementById("divmsg"); if(divmsg!=null&&divmsg!=''){ par.document.body.removeChild(divmsg); }}
4、说明
添加遮罩层的时候 loading2.gif 是存放于 /images文件夹下的一个加载请求等待时的动图。
下载地址：https://download.csdn.net/download/m0_37606574/10336991
