I'm working with two modal pop-ups. One is a transparent grey screen to overlay the screen and the other is a box that should sit ontop of the gray modal. Well, the grey modal stop halfway down the page, and the other displays at the bottom of the page.
The page works as intended in IE7 but it displays as posted above in IE8 and 9.
I'm wondering if there are any general problems that would cause the issue (Key differences between 7 and 8).
One general issue that I've tried already is the doctype. Mine is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
// loads control as modal window. if element passed in then uses it for placement otherwise it
//creates a new element in the body.
toModal: function (element) {
this.modalid = createModal(770, 500);
this.show(this.modalid);
},
var controlID = '_modal_' + modalWindows.length;
var currYpos = document.viewport.getScrollOffsets()[1];
var windowWidth = document.viewport.getWidth();
var windowHeight = document.viewport.getHeight();
var tp = (windowHeight - height) / 2;
var lt = (windowWidth - width) / 2;
tp = tp + currYpos; //+ 75;
currYpos = currYpos; //+ 145;
var modal = new Element('div', { 'id': controlID, 'class': 'modalBox', 'style': 'top:' + tp + '; left:' + lt + '; z-index:10000' + modalWindows.length + '; width:' + width + '; padding: 0px 0px 0px 0px; height:' + height + ';overflow:auto;' });
var modalBac开发者_JAVA百科k;
if ($('modal_back')) {
modalBack = $('modal_back');
} else {
modalBack = new Element('div', { 'id': 'modal_back', 'class': 'modalBack', 'style': 'top:' + 0 + '; left:' + 0 + '; width:' + windowWidth + '; height:' + docHeight + ';'});
}
modalBack.setOpacity(0.5);
// For IE6 bug regarding SELECT's taking z-index presedence over all non-windowed controls (this is fixed in IE7+)
var version = 999;
if (navigator.appVersion.indexOf("MSIE") != -1) {
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
$(document.body).insert(modalBack);
$(document.body).insert(modal);
精彩评论