IE7中灯箱前景/背景的问题

时间:2011-07-27 14:54:26

标签: javascript internet-explorer-7 overlay lightbox transparent

我搜索了主题并尝试了很长一段时间来自己发现这个问题的答案,但问题是如此之小以至于我无法弄明白。

在IE7上 - 灯箱显示如下:

http://i.imgur.com/i0J01.png

在IE8上 - 它显示如下:

http://i.imgur.com/2OnDN.png

实际灯箱的白色背景无法在IE7中显示。我怎样才能让它看起来像在IE8上一样?我可以在CSS文件中遗漏一些东西吗?

另外(不那么重要),我怎么能让角落弯曲? - 因为它出现在firefox中

lightbox.js javascript代码

document.write('<script src="'+lb_root_dir+'/javascript/jquery-1.4.2.min.js"></script>');
document.writeln('<script src="'+lb_root_dir+'/javascript/jquery.tools.min.js"></script>');
document.writeln('<script src="'+lb_root_dir+'/javascript/jquery.curvycorners.min.js"></script>');
document.writeln('<link rel="stylesheet" type="text/css" href="'+lb_root_dir+'/css/overlay.css">');

var lbdiv       = 0;

function lightbox(title, url, width, height){
    lbdiv++;
    var id = "lb"+lbdiv;
    var maxheight = 500;
    if(height > maxheight)  { height=maxheight; }

    var overlay = '<div class="close"><a onMouseover="lbRollover(\'cb'+id+'\')" onMouseout="lbRollover(\'cb'+id+'\')">close';
    overlay    += '<img src="'+lb_root_dir+'/images/close_normal.jpg" id="cb'+id+'" alt="Close" /></a></div><div class="lbtitle">';
    overlay    += title+ '</div> <div class="lbbody" style="height:' + height + 'px; width:' + width + 'px;">';
    //overlay    += '<iframe src="' + url + '" height=' + height + ' width=' + width + ' style="border:none;"></div>';
    overlay    += '<iframe src="' + url + '" height=' + (height-56) + ' width=' + width + ' marginheight="0" marginwidth="0" ';
    overlay    += 'frameborder="0" style="border:none;"></div>';

    var myElement = document.createElement('div');
    myElement.setAttribute("id", id);
    myElement.setAttribute("class", "overlay lbround");
    myElement.setAttribute("height", height);
    myElement.setAttribute("width", width);
    myElement.style.height = height+"px";
    myElement.style.width = width+"px";
    var lightboxElem = document.body.appendChild(myElement);
    lightboxElem.innerHTML = overlay;
    $('.lbround').redrawCorners();
    $("#"+id).overlay({
            mask:{ color:'#000', opacity:'0.4'},
            load: true,
            top: 'center'
    });
}

function lbRollover(imageid){
    var curimg      = document.getElementById(imageid).src;
    var newimg      = curimg.replace('normal','rollover');
    if(newimg==curimg)      { newimg = curimg.replace('rollover','normal'); }
    document.getElementById(imageid).src    = newimg;
}

0 个答案:

没有答案