最近逛论坛,见有一些帖子的问题可以通过js+div层解决,所以写一个公用的方法,共享一下
/*
=======================================================================
div覆盖层,用于新窗口中编辑时限制对底层数据的操作
调用方法:body οnlοad="init()"; openWaitLayer()打开覆盖层,closeWaitLayer()隐藏覆盖层
或者:openGlobalDiv(); closeGlobalDiv()
======================================================================
*/
var objX = 0;
var objY = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
//初始化加载DIV模板和内容
function init() {
buildGlobalDiv();
buildWaitDiv();
}
function buildGlobalDiv() {
var globalDiv = document.createElement('div');
globalDiv.id = 'globalDiv';
globalDiv.style.display = 'none';
globalDiv.style.zIndex = '98';
// globalDiv.style.textAlign='center';
// //globalDiv.style.='middle';
// globalDiv.style.paddingTop='100px';
// globalDiv.style.paddingLeft='300px';
globalDiv = set_div_style(globalDiv, 'globalDiv', '0px', '0px', bodyScrollWidth + 'px', bodyScrollHeight + 'px', "absolute", " #333333 0px solid", "default", "darkgray");
globalDiv.style.filter = "alpha(opacity=30)";
document.body.appendChild(globalDiv);
}
function set_div_style(obj, id, top, left, width, height, position, border, cursor, background) {
var obj = obj;
obj.id = id ? id : null;
obj.style.top = top ? top : '0px';
obj.style.left = left ? left : '0px';
obj.style.width = width ? width : '0px';
obj.style.height = height ? height : '0px';
obj.style.position = position ? position : "static";
obj.style.border = border ? border : "1px #000 solid";
obj.style.cursor = cursor ? cursor : "default";
obj.style.background = background ? background : "";
return obj
}
function synSizeByBody() {
reCalBodySize();
var argArr = synSizeByBody.arguments;
for (var i = 0; i < argArr.length; i++) {
if (document.getElementById(argArr[i]) != null) {
document.getElementById(argArr[i]).style.width = (bodyScrollWidth) + 'px';
document.getElementById(argArr[i]).style.height = (bodyScrollHeight) + 'px';
}
}
}
function reCalBodySize() {
bodyScrollWidth = document.documentElement.scrollWidth + document.getElementById("globalDiv").offsetLeft; //window.screen.width;//window.scrollMaxX;// window.screen.availWidth;// document.documentElement.scrollWidth;
bodyScrollHeight = document.documentElement.scrollHeight;
}
//打开覆盖层
function openGlobalDiv() {
if (document.getElementById("globalDiv") == null) {
init();
}
synSizeByBody("globalDiv");
document.getElementById("globalDiv").style.display = "block";
}
//隐藏覆盖层
function closeGlobalDiv() {
if (document.getElementById("globalDiv") != null) {
document.getElementById("globalDiv").style.display = "none";
}
}
//打开等待窗口
function openWaitLayer() {
openGlobalDiv();
if (document.getElementById("waitDiv") != null) {
document.getElementById("waitDiv").style.display = "";
}
}
//打开等待窗口
function closeWaitLayer() {
closeGlobalDiv();
if (document.getElementById("waitDiv") != null) {
document.getElementById("waitDiv").style.display = "none";
}
}
function buildWaitDiv() {
var waitDiv = document.createElement('div');
waitDiv.id = "waitDiv";
waitDiv.style.zIndex = 1000;
waitDiv.style.position = "absolute";
// waitDiv.style.paddingLeft = "10px";
waitDiv.style.paddingTop = "0px";
waitDiv.style.backgroundColor = "#EBFCCE";
// waitDiv.style.borderColor = "#8CA85A";
waitDiv.style.borderWidth = "0px";
// waitDiv.style.borderStyle = "dotted";
waitDiv.style.width = '300px';
waitDiv.style.height = '100px';
waitDiv.style.backgroundColor = 'blue'; //debugger;
waitDiv.style.left = ((document.documentElement.scrollWidth) / 2 - 50) > 0 ? ((document.documentElement.scrollWidth) / 2 - 50) : 0 + 'px';
waitDiv.style.top = ((document.documentElement.scrollHeight) / 2 - 20) > 0 ? ((document.documentElement.scrollHeight) / 2 - 50) : 0 + 'px';
//waitDiv.innerHTML="<span style='color:red; font-size:12px;'>请等待……</span>";<table style="background-image: url(Images/loading.gif)"><tr><td></td></tr></table>
waitDiv.innerHTML = "<table style='background-image: url(../../../Images/loading.gif); width:100%; height:100%; border:0px; '>" +
"<tr><td style='text-align:right; heigth:20px; color:Blue;'><span οnclick='hideWaitLayer()'>关闭</span></td></tr><tr><td style='height:80px'></td></tr></table>";
waitDiv.style.display = 'none';
document.getElementById("globalDiv").appendChild(waitDiv);
}