日期:2014-05-16  浏览次数:20395 次

显示图片,添加一个遮罩层,背景变灰半透明状态,点击两次遮罩层就变成全灰不透明了

function show_pic_detail(img_url, index){
var image = new Image();
image.src = img_url;

    $("#dis_img_detail_concent").empty();
$("#gray_div").css({ display: "block", height: $(document).height() }).fadeIn(1000);
document.documentElement.scrollTop = 0;
    $('#dis_img_detail_concent').fadeIn(1000);
$("#dis_img_detail_concent").append("<img src='"+img_url+"' /><p><a href=# onclick=clickDetailPic('"+index+"','p')><img src=../css/up.png border=0 /></a>&nbsp; &nbsp; &nbsp; &nbsp;<a href=# onclick=clickDetailPic('"+index+"','n')><img src=../css/next.png border=0 /></a></p>");
$("#dis_img_detail_concent").css({  
  "display": "block",
  "position": "absolute", 
  "width": image.width,  
  "height": image.height + 50,
  "top": (document.documentElement.clientHeight-image.height)/2+$(document).scrollTop(),  
  "left": (document.documentElement.clientWidth-image.width)/2  
});

$("#dis_img_detail_concent img").click(function(){
   $("#dis_img_detail_concent").fadeOut(500);
   $("#gray_div").fadeOut(500);
});
}

// ctype p上一页 n下一页
function clickDetailPic(index, ctype){
var imgTotal = $("#scrollPic li").length;
if (ctype == "p"){
index--;
if (index < 0){
index = imgTotal - 1;
}
}else{
index++;
if (index >= imgTotal){
index = 0;
}
}

var img_src = $("#scrollPic li:eq("+index+")").find("img").attr("src");

$("#dis_img_detail_concent").css({ display: "none"}).hide(500);
$("#gray_div").css({ display: "none"}).hide(500);

show_pic_detail(img_src, index);
}



以上代码在IE10下面一切正常,IE8下面点击下一页,上一页遮罩层就变成全灰,不透明了, 不知道什么原因,请大侠赐教, 本来想安装IE10的,无奈机器是XP的,没有办法了,请大侠看看问题出在什么地方,谢谢。。


#gray_div{background-color:#cccccc; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}

#dis_img_detail_concent{position: absolute; border:4px solid #999999; top: 0px; background-color: #666666;z-index: 100; left: 0px; display: none; }

#dis_img_detail_concent p{width:100%; height:40px; font-weight:bold; font-size:14px; text-align:center; line-height:24px; background-color:#999999}

------解决方案--------------------
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";