js实现的简单遮罩层

超级简单的一个实现，可能会有局限性，贵在简单易懂，使用的时候执行前loading,执行成功后loaded

/*

 * 显示loading遮罩层

 */

function loading() {

    var mask_bg = document.createElement("div");

    mask_bg.id = "mask_bg";

    mask_bg.style.position = "absolute";

    mask_bg.style.top = "0px";

    mask_bg.style.left = "0px";

    mask_bg.style.width = "100%";

    mask_bg.style.height = "100%";

    mask_bg.style.backgroundColor = "#777";

    mask_bg.style.opacity = 0.6;

    mask_bg.style.zIndex = 10001;

    document.body.appendChild(mask_bg);

    var mask_msg = document.createElement("div");

    mask_msg.style.position = "absolute";

    mask_msg.style.top = "35%";

    mask_msg.style.left = "42%";

    mask_msg.style.backgroundColor = "white";

    mask_msg.style.border = "#336699 1px solid";

    mask_msg.style.textAlign = "center";

    mask_msg.style.fontSize = "1.1em";

    mask_msg.style.fontWeight = "bold";

    mask_msg.style.padding = "0.5em 3em 0.5em 3em";

    mask_msg.style.zIndex = 10002;

    mask_msg.innerText = "正在执行,请稍后...";

    mask_bg.appendChild(mask_msg);

}

/*

 * 关闭遮罩层

 */

function loaded() {

    var mask_bg = document.getElementById("mask_bg");

    if (mask_bg != null)

        mask_bg.parentNode.removeChild(mask_bg);

}