浏览器可视区域遮罩

原文地址 http://www.sub-273.com/archives/451

思路：遮罩的部分用一个层来实现..定位时候用fixed, 从而使其不会随着滚动条而变化位置..提示框也是这个属性..只是z-index设置的比遮罩层大就好..另外就是将提示框水平.垂直居中显示了

代码如下：

//弹出层效果 $(function(){ //设置遮罩层和提示框的透明度..可自行修改 $(".winBg,.hoverLayer").css("opacity","0.8").hide(); //点击按钮..遮罩 $("#btn").click(function(){ //可以自行修改遮罩的效果..slideDown, fadeIn $(".winBg").slideDown(200).parent() .find(".hoverLayer").delay(200).fadeIn(200); }); //点击提示框, 遮罩消失 $(".hoverLayer").click(function(){ $(this).slideUp(200).parent() .find(".winBg").delay(200).fadeOut(200); }); });

使用css实现元素水平垂直居中的一种方法就是绝对定位, 然后设置上左距离为50%, 然后设置margin上左分别为元素高宽一半的负值即可(有点绕口奥..看下边代码就好理解了)..

/*继续不提供IE6的支持, 不解释*/ .winBg{ background:#333; position:fixed; top:0; right:0; bottom:0; left:0; z-index:100;} .hoverLayer{ width:200px; height:150px; position:fixed; /*以下4行实现了水平垂直居中*/ left:50%; top:50%; margin-left:-100px; margin-top:-75px; background:#999; border:solid 1px #CCC; z-index:999;}

<div class="winBg"></div> <div class="hoverLayer"> 点我干掉遮罩层.. </div> <input type="button" value="华丽的遮罩" id="btn" /><br /> 我来撑高页面的<br /> 我来撑高页面的<br /> 我来撑高页面的<br /> ...<!--下边省略N行..自行撑高之即可..-->