Проблема с лайтбоксом переднего плана / фона в IE7 - PullRequest
0 голосов
/ 27 июля 2011

Я искал темы и довольно долго пытался найти ответ на эту проблему, однако проблема настолько мала, что я не смог ее выяснить.

В IE7 -Лайтбокс отображается следующим образом:

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

А на IE8 - выглядит так:

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

Белый фонфактический лайтбокс не появляется в IE7.Как я смогу сделать так, чтобы он выглядел так же, как в IE8?Могу ли я что-то упустить в файле CSS?

Кроме того (не так важно), как я могу получить изогнутые углы?- как это выглядит в Firefox

код JavaScript lightbox.js

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;
}
...