js+div覆盖层

最近逛论坛,见有一些帖子的问题可以通过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);
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值