JavaScript 遮罩

来源:互联网 发布:精仿魔客吧整站源码 编辑:程序博客网 时间:2024/05/16 08:07
//窗口的宽度和高度
    function Dimensions(){
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
        if(windowWidth){
            winWidth = windowWidth
        }else if((document.body) && (document.body.clientWidth)){
            winWidth = document.body.clientWidth;
        }
        if(windowHeight){
            winHeight = windowHeight;
        }else if(document.body && document.body.clientHeight){
            winHeight = document.body.clientHeight;
        }
        var documentElement = document.documentElement;
        if(documentElement && documentElement.clientWidth && documentElement.clientHeight){
            winWidth = documentElement.clientWidth;
            winHeight = documentElement.clientHeight;
        }
        this.width = winWidth;
        this.height = winHeight;
        //alert(winWidth+" : "+winHeight);
    }
    
    /* 弹出框 */
    function popupAlert(){
        var d = new Dimensions();
        window.onresize = Dimensions;
        createMask(d.width, d.height, "#33393C", 0.5);
        createBomb(d.width, d.height, 300, 150, "#EFEFEF");
        
    }
    
    /** 创建遮罩层  */
    function createMask(winWidth , winHeight , background , opacity){
        var mask = document.createElement("div");    //创建遮罩层
        mask.id = "mask";                            //设置遮罩层id
        mask.style.position = "absolute";            //遮罩层位置
        mask.style.zIndex = "1";                    //遮罩层zIndex
        mask.style.width = winWidth+"px";            //设置遮罩层宽度
        mask.style.height = winHeight+"px";            //设置遮罩层高度
        mask.style.top = "0px";                        //设置遮罩层于上边距离
        mask.style.left = "0px";                    //设置遮罩层左边距离
        mask.style.background = "#33393C";            //#33393C//遮罩层背景色
        mask.style.filter = "alpha(opacity="+parseInt(opacity * 100)+")";    //遮罩层透明度IE
        mask.style.opacity = opacity+"0";                //遮罩层透明度FF
        document.body.appendChild(mask);                //遮罩层添加到DOM中
    };
    
    /** 创建弹出层 */
    function createBomb(winWidth, winHeight, width , height , background){
        var bomb = document.createElement("div");
        bomb.id = "bomId";
        bomb.style.position = "absolute";
        bomb.style.zIndex = "9999";
        bomb.style.width = width+"px";
        bomb.style.height = height+"px";
        bomb.style.top = (winHeight/2 - height/2)+"px";
        bomb.style.left = (winWidth/2 - width/2)+"px";
        bomb.style.background = "#EFEFEF";
        bomb.style.border = "1px solid #860001";
        bomb.style.padding = "5px";
        bomb.innerHTML = "新弹出层内容。。。";
        document.body.appendChild(bomb);
    };
原创粉丝点击