弹出层，遮罩层的实现

函数实现遮罩层、弹出框

 //锁定背景屏幕
    function lockScreen() {
        var clientH = document.body.offsetHeight; //body高度
        var clientW = document.body.offsetWidth; //body宽度
        var docH = document.body.scrollHeight; //浏览器高度
        var docW = document.body.scrollWidth; //浏览器宽度
        var bgW = clientW > docW ? clientW : docW; //取有效宽
        var bgH = clientH > docH ? clientH : docH; //取有效高
        var blackBg = document.createElement("div");
        blackBg.id = "blackBg";
        blackBg.style.position = "absolute";
        blackBg.style.zIndex = "99999";
        blackBg.style.top = "0";
        blackBg.style.left = "0";
        blackBg.style.width = bgW+"px";
        blackBg.style.height = bgH+"px";
        blackBg.style.opacity = "0.4";
        blackBg.style.backgroundColor = "#333";
        document.body.appendChild(blackBg);
    }
    //关闭按钮事件
    function popupClose(el) {
        var blackBg = document.getElementById("blackBg");
        blackBg && document.body.removeChild(blackBg);
        el.parentNode.style.display = "none";
    }
    //自动关闭
    function autoClose(id) {
        id = id || "H-dialog";
        var blackBg = document.getElementById("blackBg");
        var objDiv = document.getElementById(id);
        setTimeout(function(){
            blackBg && document.body.removeChild(blackBg);
            objDiv.style.display = "none";
        },2000);
    }
    /**
    *功能 : 弹窗信息
    *参数1 : 提示信息内容
    *参数2 : 提示信息状态默认0 为提示信息,1为成功信息
    *参数3 : 弹窗div的id,默认"H-dialog"
    *参数4 : 弹窗内容的id,默认"msgCont"
    **/
    function showMsg(msg) {
        msg = msg || "请重新操作";
        var status = arguments[1] || 0,
        popupId = arguments[2] || "H-dialog",
        contentId = arguments[3] || "msgCont";      
        lockScreen();
        //屏幕实际高宽
        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;
        if (typeof pageWidth != "number") {
            if (document.compatMode == "CSS1Compat") {
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            } else {
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
        }
        //滚动条高宽
        var scrollLeft = window.document.documentElement.scrollLeft;
        var scrollTop = 0;
        if (typeof window.pageYOffset != 'undefined') {
            scrollTop = window.pageYOffset;
        } else if (typeof window.document.compatMode != 'undefined' &&
            window.document.compatMode != 'BackCompat') {
            scrollTop = window.document.documentElement.scrollTop;
        } else if (typeof window.document.body != 'undefined') {
            scrollTop = window.document.body.scrollTop;
        }

获取页面的高宽

function openNew(){
    //获取页面的高度和宽度
    var sWidth=document.body.scrollWidth;
    var sHeight=document.body.scrollHeight;

    //获取页面的可视区域高度和宽度
    var wHeight=document.documentElement.clientHeight;

    var oMask=document.createElement("div");
        oMask.id="mask";
        oMask.style.height=sHeight+"px";
        oMask.style.width=sWidth+"px";
        document.body.appendChild(oMask);
    var oLogin=document.createElement("div");
        oLogin.id="login";
        oLogin.innerHTML="<div class='loginCon'><div id='close'>点击关闭</div></div>";
        document.body.appendChild(oLogin);

    //获取登陆框的宽和高
    var dHeight=oLogin.offsetHeight;
    var dWidth=oLogin.offsetWidth;
        //设置登陆框的left和top
        oLogin.style.left=sWidth/2-dWidth/2+"px";
        oLogin.style.top=wHeight/2-dHeight/2+"px";
    //点击关闭按钮
    var oClose=document.getElementById("close");

        //点击登陆框以外的区域也可以关闭登陆框
        oClose.onclick=oMask.onclick=function(){
                    document.body.removeChild(oLogin);
                    document.body.removeChild(oMask);
                    };
                    };

    window.onload=function(){
            var oBtn=document.getElementById("btnLogin");
                //点击登录按钮
                oBtn.onclick=function(){
                    openNew();
                    return false;
                    }

        }
</script>