龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

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

时间:2014-10-19 15:07来源:网络整理 作者:网络 点击:
分享到:
复制代码 代码如下: a{ text-decoration:none; color:#fff;} #rbox{ width:620px; height:420px; position:fixed; top:50%; left:50%; margin:-210px 0 0 -310px; border-radius:8px; /*圆角*/ background

复制代码 代码如下:

a{ text-decoration:none; color:#fff;}
#rbox{

    width:620px;
    height:420px;
    position:fixed;
    top:50%;
    left:50%;
    margin:-210px 0 0 -310px;
    border-radius:8px; /*圆角*/
    background-color:#999;
    z-index:3;
    display:none;   
}

.go{

    position:absolute;
    right: 10px;
    top: 10px;
    padding: 5px 12px;
    background: rgba(0,0,0,.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,.4);
    color: #fff;
    border-radius: 26px;
}

#mask{

    background-color:#000;
    position:absolute;
    top:0;
    left:0;
    display:none;
    z-index:2;
}

#register{ z-index:1; color:blue;}
.content{ width:800px; height:auto; margin:0 auto;}

JS:

复制代码 代码如下:

$(function(){
   
    //点击注册
    $("#register").click(function(){
   
        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)});
            }
        }
    });

精彩图集

赞助商链接