遮蔽层【原创】
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()" />