Fixing Display Issue with IE6 and AJAX toolkit Modal Popup Extender

I had a bit of a nightmare trying to get the modal popup extender working when viewing a webpage containing this Ajax control in IE6. My thoughts regarding IE6 are best left out of this!! After some digging I found several articles that pointed to a variety of things - this is what worked for me.

As I was working with a page which relied on a series of masters I could not change the “doctype”.

This left me to hack the source of the Ajax toolkit. If you open this solution, and look at the JavaScript the answer lies there.

This works with v1.0.10123.0

1. Change the file Common.js which is found at AjaxControlToolkit\Common\Common.js
2. Search for a method called 'getClientBounds'
3. Replace switch with

   1: switch(Sys.Browser.agent) {

   2:     case Sys.Browser.InternetExplorer:

   3:         if (document.documentElement && document.documentElement.clientWidth)

   4:             clientWidth = document.documentElement.clientWidth;

   5:         else if (document.body)

   6:             clientWidth = document.body.clientWidth;

   7:         if (document.documentElement && document.documentElement.clientHeight)

   8:             clientHeight = document.documentElement.clientHeight;

   9:         else if (document.body)

  10:             clientHeight = document.body.clientHeight;

  11:         break;

  12:     case Sys.Browser.Safari:

  13:         clientWidth = window.innerWidth;

  14:         clientHeight = window.innerHeight;

  15:         break;

4. Important part is the next bit - as absolute positioning is not correctly implemented in IE6. Look for the initalize function and look for the background i.e.

replace this line:

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

with

   1: if (this._isIE6)

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

   3: else

   4:   this._foregroundElement.style.position = 'absolute';

and this line:

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

withp>

   1: if (this._isIE6)

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

   3: else

   4: this._backgroundElement.style.position = 'absolute';

This should solve the problem.