锁屏-lightbox效果

锁屏就是弹出半透明的遮罩层，把整个页面遮住不能操作，然后上边有一个可操作窗口，类似lightbox效果。

<span onclick="lightbox.lockScreen('white')">锁屏并弹出层</span>
<span onclick="lightbox.openScreen('white')">关闭弹出层并解锁</span>

说明：lightbox.lockScreen和lightbox.openScreen分别是锁屏和解锁方法，“white”是要弹出层的id，样式自由控制，只要是默认隐藏并绝对定位即可。

var lightbox = (function(){
    function getPageScroll(){ //获取滚动条高度
        var yScroll; 
        if (document.documentElement && document.documentElement.scrollTop){ 
            yScroll = document.documentElement.scrollTop; 
        } else if (document.body) { 
            yScroll = document.body.scrollTop; 
        } 
        return yScroll; 
    }
    var pageWidth = document.documentElement.clientWidth,//可视区域宽和高
        pageHeight = document.documentElement.clientHeight;
    var widthMore = document.documentElement.scrollWidth,//有滚动条时的宽高
        heightMore = document.documentElement.scrollHeight;
    var    rWidth = widthMore,//透明层宽高
        rHeight = Math.max(pageHeight, heightMore);
    var blackDiv = document.createElement('div'),
        zIframe = document.createElement('iframe');
    
    function setBlack(){//设置透明层,ifame用于盖住页面中得select
        var cssStr = 'position:absolute;top:0;left:0;background-color:black;z-index:100;opacity:.80;filter:alpha(opacity=80);width:' + rWidth + 'px;height:' + rHeight + 'px',
            cssStrIframe = 'opacity:.0;filter:alpha(opacity=0);z-index:2;border:0;width:' + rWidth + 'px;height:' + rHeight + 'px';
        blackDiv.style.cssText = cssStr;
        zIframe.style.cssText = cssStrIframe;
        blackDiv.appendChild(zIframe);
        document.body.appendChild(blackDiv);
    }
    function setWhitePos(id){//设置弹出层位置
        var whiteDiv = document.getElementById(id);
        whiteDiv.style.display = 'block';
        if ((pageWidth - whiteDiv.offsetWidth) > 0){//控制弹出层位置
            whiteDiv.style.left = parseInt((pageWidth - whiteDiv.offsetWidth)/2) + 'px';
        }else{
            whiteDiv.style.left = 0;
        }
        if ((pageHeight - whiteDiv.offsetHeight) > 0){
            whiteDiv.style.top = getPageScroll() + parseInt((pageHeight - whiteDiv.offsetHeight)/2) + 'px';
        }else{
            whiteDiv.style.top = getPageScroll() + 'px';
        }
    }
    
    return {//返回2个含开关方法的对象
        lockScreen : function(id){
            setBlack();
            setWhitePos(id)
        },
        openScreen : function(id){
            document.getElementById(id).style.display = 'none';
            blackDiv.style.display = 'none';
        }
    }    
})();

12.7.9更新

var lightbox = (function(){
    function getPageScroll(){ //获取滚动条高度
        var yScroll; 
        if (document.documentElement && document.documentElement.scrollTop){ 
            yScroll = document.documentElement.scrollTop; 
        } else if (document.body) { 
            yScroll = document.body.scrollTop; 
        } 
        return yScroll; 
    }
    var pageWidth = document.documentElement.clientWidth,//可视区域宽和高
        pageHeight = document.documentElement.clientHeight;
    var widthMore = document.documentElement.scrollWidth,//有滚动条时的宽高
        heightMore = document.documentElement.scrollHeight;
    var    rWidth = widthMore,//透明层宽高
        rHeight = Math.max(pageHeight, heightMore);
    var blackDiv = document.createElement('div'),
        zIframe = document.createElement('iframe');
    
    function setBlack(o){//设置透明层,ifame用于盖住页面中得select
        var t = o.top || 41,
            h = o.height || rHeight;
            z = o.z_index || 1000;
        var cssStr = 'position:absolute;top:' + t + 'px;left:0;background-color:black;z-index:'+ z +';opacity:.80;filter:alpha(opacity=80);width:' + rWidth + 'px;height:' + h + 'px',
            cssStrIframe = 'opacity:.0;filter:alpha(opacity=0);border:0;width:' + rWidth + 'px;height:' + h + 'px';
        blackDiv.style.cssText = cssStr;
        zIframe.style.cssText = cssStrIframe;
        blackDiv.appendChild(zIframe);
        document.body.appendChild(blackDiv);
    }
    function setWhitePos(o){//设置弹出层位置
        var whiteDiv = document.getElementById(o.id);
        whiteDiv.style.display = 'block';
        whiteDiv.style.zIndex = (o.z_index) ? (o.z_index + 1) : 1001;
        if ((pageWidth - whiteDiv.offsetWidth) > 0){//控制弹出层位置
            whiteDiv.style.left = parseInt((pageWidth - whiteDiv.offsetWidth)/2) + 'px';
        }else{
            whiteDiv.style.left = 0;
        }
        if ((pageHeight - whiteDiv.offsetHeight) > 0){
            whiteDiv.style.top = getPageScroll() + parseInt((pageHeight - whiteDiv.offsetHeight)/2) + 'px';
        }else{
            whiteDiv.style.top = getPageScroll() + 'px';
        }
    }
    
    return {//返回2个含开关方法的对象
        lockScreen : function(o){
            setBlack(o);
            setWhitePos(o);
            if(o.callback){
                o.callback();
            }
        },
        openScreen : function(o){
            document.getElementById(o.id).style.display = 'none';
            blackDiv.style.display = 'none';
            if(o.callback){
                o.callback();
            }
        }
    }    
})();

传入的参数以对象的形式，加入了回调函数。可以直接传一个高度值防止浏览器差异。