zoukankan      html  css  js  c++  java
  • 锁屏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);' + rWidth + 'px;height:' + rHeight + 'px',
    cssStrIframe = 'opacity:.0;filter:alpha(opacity=0);z-index:2;border:0;' + 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);' + rWidth + 'px;height:' + h + 'px',
                cssStrIframe = 'opacity:.0;filter:alpha(opacity=0);border:0;' + 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();
                }
            }
        }    
    })();

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

     

  • 相关阅读:
    Python变量常量命名
    代码格式
    Python 输入输出
    数据源
    LaTeX Test
    软件工程
    eclipse-智能提示设置
    java代码里设置指定颜色常值
    命令行中Vim直接打开某行
    Vim里快速替换命令
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356455.html
Copyright © 2011-2022 走看看