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)});
}
}
});
$(".go").click(function(){
$("#mask").hide();
$("#rbox").hide();
});
});
至此功能完成。
您可能感兴趣的文章: