Я искал темы и довольно долго пытался найти ответ на эту проблему, однако проблема настолько мала, что я не смог ее выяснить.
В 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;
}