遮蔽层【原创】

CSS代码

*{ margin:0; padding:0}
#shield{ position:fixed; _position:absolute; left:0; top:0; height:100%; width:100%; z-index:1000; background-color:#000; _background-color:#999; filter:alpha(opacity=30); opacity:0.3; }

JS代码(引入jquery库

var shield=function(){
  var str="<div id='shield'></div>";
  $("body").append(str); //添加屏蔽层 
  if($.browser.version == "6.0"){
   var ht=parseInt($(document).height()); //遮蔽层默认高度为浏览器窗口高度
   var bodyHt=($("body").height().toString()).split("px");
   if(ht<parseInt(bodyHt[0])){
         ht=bodyHt[0];
         }
      $("#shield").css("height",ht+"px");
      $("select").css("visibility","hidden");//下拉菜单隐藏
   }
  
 }

注意:在IE6下面,遮蔽层的高度是不会自动适应的,当窗口变换大小时会出现无法遮蔽完的效果。

解决方案:

$(window).resize(function(){
   shield();//重新调用一次
});

页面演示

<input type="button"  value="click" onclick="shield()" />

posted @ 2013-04-15 14:11  关小庆  阅读(218)  评论(0编辑  收藏  举报