JS弹出层IE8下部兼容出错

 从网上搜查到一弹出层，在IE6下弹出层100%面积正常显示，但在IE8只在弹出层中间一小部分显示页面内容
，但把html文件的第一行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
去掉后就显示正常了，可我的页面必须有这一行，哪位高手看看，该怎么改写下面的JS呢？
 function popwindow(){
var titile = '';
var width = 640;
var height = 480;
var sSend="";
var src = "";
var path = "../icos/";
var sFunc = '';
var sClose = '<img id="popwindowBoxClose" onclick="new popwindow().reset();" src="' + path + '003_33.gif" border="0" width="17" height="17"  align="absmiddle" />';
var sBody = '\
<table id="popwindowBodyBox" border="0" align="center" cellpadding="0" cellspacing="0">\
<tr height="10"><td colspan="4"></td></tr>\
<tr>\
<td width="10"></td>\
<td width="80" align="center" valign="absmiddle"><img id="popwindowBoxFace" src="' + path + '3.gif" /></td>\
<td id="popwindowMsg" style="font-size:12px;color:#000;"></td>\
<td width="10"></td>\
</tr>\
<tr height="10"><td colspan="4" align="center"></td></tr>\
<tr><td id="popwindowFunc" colspan="4" align="center">' + sFunc + '</td></tr>\
<tr height="10"><td colspan="4" align="center"></td></tr>\
</table>\
';
var sBox = '\
<table id="popwindowBox" width="' + width + '" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #000;display:none;z-index:10;">\
<tr height="1" bgcolor="#D6E3EB"><td></td></tr>\
<tr height="25" bgcolor="#5fc3d7">\
<td>\
<table onselectstart="return false;" style="-moz-user-select:none;" width="100%" border="0" cellpadding="0" cellspacing="0">\
<tr>\
<td width="6"></td>\
<td id="popwindowBoxTitle" onmousedown="new popwindow().moveStart(event, \'popwindowBox\')" style="color:#a00;cursor:move;font-size:12px;font-weight:bold;">提示信息</td>\
<td id="popwindowClose" width="27" align="right" valign="middle">\
' + sClose + '\
</td>\
<td width="6"></td>\
</tr>\
</table>\
</td>\
</tr>\
<tr height="2" bgcolor="#EDEDED"><td></td></tr>\
<tr id="popwindowHeight" style="height:' + height + '">\
<td id="popwindowBody" style="background:#fff;color:#000;">' + sBody + '</td>\
</tr>\
<tr height="25" bgcolor="#5fc3d7">\
<td>\
</td>\
</tr>\
</table>\
<div id="popwindowBoxShadow" style="width:100%;height:450;overflow:scroll;overflow-x:scroll;SCROLLBAR-FACE-COLOR: #5fc3d7"></div>\
';
function $(_sId){return document.getElementById(_sId)}
this.show = function(){$('popwindowBodyBox') ? function(){} : this.init();this.middle('popwindowBox');this.shadow();}
this.reset = function(){this.hideModule('select', '');$('popwindowBox').style.display='none';$('popwindowBoxShadow').style.display = "none";$('popwindowBody').innerHTML = sBody;}
this.html = function(_sHtml){$("popwindowBody").innerHTML = _sHtml;this.show();}
this.init = function(){
$('popwindowCase') ? $('popwindowCase').parentNode.removeChild($('popwindowCase')) : function(){};
var oDiv = document.createElement('span');
oDiv.id = "popwindowCase";
oDiv.innerHTML = sBox;
document.body.appendChild(oDiv);
}
this.button = function(_sId, _sFuc){
if($(_sId)){
$(_sId).style.display = '';
if($(_sId).addEventListener){
if($(_sId).act){$(_sId).removeEventListener('click', function(){eval($(_sId).act)}, false);}
$(_sId).act = _sFuc;
$(_sId).addEventListener('click', function(){eval(_sFuc)}, false);
}else{
if($(_sId).act){$(_sId).detachEvent('onclick', function(){eval($(_sId).act)});}
$(_sId).act = _sFuc;
$(_sId).attachEvent('onclick', function(){eval(_sFuc)});
}
}
}
this.shadow = function(){
var oShadow = $('popwindowBoxShadow');
var opopwindow = $('popwindowBox');
oShadow['style']['position'] = "absolute";
oShadow['style']['background'] = "#000";
oShadow['style']['display'] = "";
oShadow['style']['opacity'] = "0.2";
oShadow['style']['filter'] = "alpha(opacity=20)";
oShadow['style']['top'] = opopwindow.offsetTop + 6;
oShadow['style']['left'] = opopwindow.offsetLeft + 6;
oShadow['style']['width'] = opopwindow.offsetWidth;
oShadow['style']['height'] = opopwindow.offsetHeight;
}
this.open = function(_sUrl, _sMode){
this.show();
if(!_sMode || _sMode == "no" || _sMode == "yes"){
$("popwindowBody").innerHTML = "<iframe id='popwindowFrame' width='100%' height='100%' frameborder='0' scrolling='auto' SCROLLBAR-FACE-COLOR: #5fc3d7;></iframe>";
$("popwindowFrame").src = _sUrl;
}
}
this.showWindow = function(_sUrl, _iWidth, _iHeight, _sMode){
var oWindow;
var sLeft = (screen.width) ? (screen.width - _iWidth)/2 : 0;
var sTop = (screen.height) ? (screen.height - _iHeight)/2 : 0;
if(window.showModalpopwindow && _sMode == "m"){
oWindow = window.showModalpopwindow(_sUrl,"","popwindowWidth:" + _iWidth + "px;popwindowheight:" + _iHeight + "px");
} else {
oWindow = window.open(_sUrl, '', 'height=' + _iHeight + ', width=' + _iWidth + ', top=' + sTop + ', left=' + sLeft + ', toolbar=no, menubar=no, scrollbars=' + _sMode + ', resizable=no,location=no, status=no');
}
}
this.event = function(_sMsg, _sOk, _sCancel, _sClose){
$('popwindowFunc').innerHTML = sFunc;
$('popwindowClose').innerHTML = sClose;
$('popwindowBodyBox') == null ? $('popwindowBody').innerHTML = sBody : function(){};
$('popwindowMsg') ? $('popwindowMsg').innerHTML = _sMsg  : function(){};
this.show();
_sOk ? this.button('popwindowOk', _sOk) | $('popwindowOk').focus() : $('popwindowOk').style.display = 'none';
_sCancel ? this.button('popwindowCancel', _sCancel) : $('popwindowCancel').style.display = 'none';
_sClose ? this.button('popwindowBoxClose', _sClose) : function(){};
//_sOk ? this.button('popwindowOk', _sOk) : _sOk == "" ? function(){} : $('popwindowOk').style.display = 'none';
//_sCancel ? this.button('popwindowCancel', _sCancel) : _sCancel == "" ? function(){} : $('popwindowCancel').style.display = 'none';
}
this.set = function(_oAttr, _sVal){
var oShadow = $('popwindowBoxShadow');
var opopwindow = $('popwindowBox');
var oHeight = $('popwindowHeight'); if(_sVal != ''){
switch(_oAttr){
case 'title':
$('popwindowBoxTitle').innerHTML = '<center><b>' + _sVal + '</b></center>';
title = _sVal;
break;
case 'width':
opopwindow['style']['width'] = _sVal;
width = _sVal;
break;
case 'height':
oHeight['style']['height'] = _sVal;
height = _sVal;
break;
case 'src':
if(parseInt(_sVal) > 0){
$('popwindowBoxFace') ? $('popwindowBoxFace').src = path + _sVal + '.gif' : function(){};
}else{
$('popwindowBoxFace') ? $('popwindowBoxFace').src = _sVal : function(){};
}
src = _sVal;
break;
}
}
this.middle('popwindowBox');
oShadow['style']['top'] = opopwindow.offsetTop + 6;
oShadow['style']['left'] = opopwindow.offsetLeft + 6;
oShadow['style']['width'] = opopwindow.offsetWidth;
oShadow['style']['height'] = opopwindow.offsetHeight;
}
this.moveStart = function (event, _sId){
var oObj = $(_sId);
oObj.onmousemove = mousemove;
oObj.onmouseup = mouseup;
oObj.setCapture ? oObj.setCapture() : function(){};
oEvent = window.event ? window.event : event;
var dragData = {x : oEvent.clientX, y : oEvent.clientY};
var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
function mousemove(){
var oEvent = window.event ? window.event : event;
var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
oObj.style.left = iLeft;
oObj.style.top = iTop;
$('popwindowBoxShadow').style.left = iLeft + 6;
$('popwindowBoxShadow').style.top = iTop + 6;
dragData = {x: oEvent.clientX, y: oEvent.clientY};

}
function mouseup(){
var oEvent = window.event ? window.event : event;
oObj.onmousemove = null;
oObj.onmouseup = null;
if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
oObj.style.left = backData.y;
oObj.style.top = backData.x;
$('popwindowBoxShadow').style.left = backData.y + 6;
$('popwindowBoxShadow').style.top = backData.x + 6;
}
oObj.releaseCapture ? oObj.releaseCapture() : function(){};
}
}
this.hideModule = function(_sType, _sDisplay){
var aIframe = parent.document.getElementsByTagName("iframe");aIframe=0;
var aType = document.getElementsByTagName(_sType);
var iChildObj, iChildLen;
for (var i = 0; i < aType.length; i++){
aType[i].style.display = _sDisplay;
}
for (var j = 0; j < aIframe.length; j++){
iChildObj = document.frames ? document.frames[j] : aIframe[j].contentWindow;
iChildLen = iChildObj.document.body.getElementsByTagName(_sType).length;
for (var k = 0; k < iChildLen; k++){
iChildObj.document.body.getElementsByTagName(_sType)[k].style.display = _sDisplay;
}
}
}
this.middle = function(_sId){
document.getElementById(_sId)['style']['display'] = '';
document.getElementById(_sId)['style']['position'] = "absolute";
document.getElementById(_sId)['style']['left'] = (document.body.clientWidth / 2) - (document.getElementById(_sId).offsetWidth / 2);
document.getElementById(_sId)['style']['top'] = (document.body.clientHeight / 2 + document.body.scrollTop) - (document.getElementById(_sId).offsetHeight / 2);
}
}

解决方案 »

  1.   

    所有的
    document.body.clientWidth --->document.documentElement.clientWidth
    clientHeight同理
    或者：var de=document.compatMode=="CSS1Compat"?document.documentElement:document.body;  
    加了dtd之后 compatMode就是CSS1Compat了，
    参考：
      

  2.   

    oObj.style.left = backData.y +"px";
    都要加获取的时候也要检查。
      

  3.   

    加上这句话<meta http-equiv="x-ua-compatible" content="ie=7" />
      

  4.   

    <meta http-equiv="x-ua-compatible" content="ie=7" />GOOD!!
      

  5.   

    <meta http-equiv="x-ua-compatible" content="ie=7" />