兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码

2020-05-22 15:14:21易采站长站整理

        if(window.screen.availHeight > $(document.body).outerHeight(true)){
       
            //当屏幕可用工作区域的高度 > 浏览器当前窗口文档body的总高度 包括border padding margin时( 缩放时 )
            $(“#mask”).show().css({“opacity”:”0.5″,”width”:”100%”,”height”:window.screen.availHeight});
        }else{
       
            $(“#mask”).show().css({“opacity”:”0.5″,”width”:”100%”,”height”:$(document.body).outerHeight(true)});
        }           
        $(“#rbox”).show();       
    });   

    //根据浏览器可视窗口的变化调整遮罩的宽度和高度,使遮罩充满浏览器
    $(window).resize(function(){           

        //根据浏览器窗口变化改变遮罩宽度和高度,使遮罩充满整个浏览器   
        if($(“#mask”).css(“width”)!=0){

            $(“#mask”).css(“width”,”100%”); //必要时可对宽度也作出判断      

            if(window.screen.availHeight > $(document.body).outerHeight(true)){
           
                $(“#mask”).css({“opacity”:”0.5″,”width”:”100%”,”height”:window.screen.availHeight});
            }else{
           
                $(“#mask”).css({“opacity”:”0.5″,”width”:”100%”,”height”:$(document.body).outerHeight(true)});
            }
        }
    });

    $(“.go”).click(function(){