解决DocType引起AjaxTookit的ModulPopup显示异常问题的方法

AjaxTookit的ModulPopup在DocType设置不正确的情况下会显示不正确，找到一篇英文版的解决方案，大概是下载源代码，然后修改里面的脚本后，重新编译后，再引用。下面转贴出来：

原文如下：

(引自：http://blog.rameshbhaskar.com/2008/03/03/fixing-modalpopupextender-doctype-problems/)

Most problems with regards to the modalpopupextender not displaying at the center of your page when co-ordinates are not specified arise due to an incorrect DOCTYPE. Usually changing this DOCTYPE will help (as I have pointed out in a previous post of mine). However sometimes it is not possible to change the DOCTYPE as it affects other portions of your page.

In order to fix that you may have to perform a custom build of the AjaxControlToolkit by modifying some of the source.

I’ve tested this out with version 1.0.10920.0 of the AjaxControlToolkit, however I’m sure it works with later versions.

Download the source of the toolkit from codeplex and open the solution using Visual Studio.

The first file you will have to modify is the ‘Common.js’ which is located in ‘AjaxControlToolkit\Common\Common.js’ .

Within this search for the function ‘getClientBounds’. Replace the switch statement with the following one:


switch(Sys.Browser.agent) {
case Sys.Browser.InternetExplorer:
if (document.documentElement && document.documentElement.clientWidth)
clientWidth = document.documentElement.clientWidth;
else if (document.body)
clientWidth = document.body.clientWidth;
//clientWidth = document.documentElement.clientWidth;
if (document.documentElement && document.documentElement.clientHeight)
clientHeight = document.documentElement.clientHeight;
else if (document.body)
clientHeight = document.body.clientHeight;
//clientHeight = document.documentElement.clientHeight;
break;
case Sys.Browser.Safari:
clientWidth = window.innerWidth;
clientHeight = window.innerHeight;
break;
case Sys.Browser.Opera:
clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
break;
default: // Sys.Browser.Firefox, etc.
clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
break;
}


The next set of changes to be made are to the ‘initialize’ function of the ModalPopupExtender which is located in the ‘AjaxControlToolkit\ModalPopupExtender\ModalPopupBehavior.js’ file.

Within the ‘initialize’ function search for


this._backgroundElement.style.position = 'fixed';


and change it to this


this._backgroundElement.style.position = 'absolute';//'fixed';


A few lines below that is another change that has to be made from:


this._foregroundElement.style.position = 'fixed';


to:


this._foregroundElement.style.position = 'absolute';//'fixed';


Once you have made the changes compile the source and you should be able to use your new AjaxControlToolkit.dll in order to resolve most of the centering issues known to occur with the ModalPopupExtender.

Make sure to backup your original files before you attempt this.

 

再次表达对原作者的敬意！！！