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.
Heather Gebbia says:
Hi, I have been struggling with this ModalPopup not positioning correctly for some time and I’m
14 March 2008, 12:10 amglad I found your post. I’m confused about how to compile the source and use a new AjaxControlToolkit.dll. Can you explain how to get the new dll and what changes I need to make
to my application to get it to recognize the new one? Thanks!
Heather Gebbia says:
Please disregard my earlier question. I think I figured out how to change the dll and add it to
14 March 2008, 1:19 ammy website. I’ve done all that now, and now the popup is not up in the top left corner, mostly
off the page like it was before, but it is not centered on the page either. It’s centered
vertically, but horizontally it’s over to the right side of the page. Do you know how I can get
it to center correctly? Thanks!
Heather Gebbia says:
Sorry to keep posting here, but I found the answer to what I was looking for. Please disregard
my 2 previous questions.
Also, thanks so much for the solution provided on this page. It has just saved me hours of
14 March 2008, 1:48 amfrustration trying to figure this thing out.
Ramesh Bhaskar says:
@Heather
14 March 2008, 4:22 amGlad it helped :). If there is something else you did to fix it for not displaying in the center, then could you post a comment on how you fixed it?
Heather Gebbia says:
Sure, I had originally put a tag around the modal popup panel, and I think it was set to
15 March 2008, 12:23 amposition:relative or it might have been absolute. Either way, I just removed the tag, and
then it showed up in the center of the page where it is supposed to be. Thanks again!
Richard Graeber says:
Thank you very much!
The modalpopupextender was working just fine in Firefox, but in IE7, the popup was off the screen centered at the top left browser window corner.
I am unable to change the DOCTYPE for the site, but making your suggested changes fixed the problem.
Thanks for you help.
17 March 2008, 11:07 pmRich Graeber says:
Thank you very much!
The modalpopupextender was working just fine in Firefox, but in IE7, the popup was off the screen centered at the top left browser window corner.
I am unable to change the DOCTYPE for the site, but making your suggested changes fixed the problem.
Thanks for your help.
17 March 2008, 11:08 pmAndrew says:
Hi does anyone have the new .dll could you email it to me please:-
andrewrees@gmail.com
I’m having problems recompiling AjaxControlToolkit with Visual C# Express.
4 April 2008, 4:42 pmRamesh Bhaskar says:
@Richard
Glad it helped
@Andrew
4 April 2008, 9:03 pmI’ve sent it to you.
Jon says:
I have the same sort of problem with the modal popup not centering, but it’s not the DOCTYPE issue described. It’s because my content div in the master page has position: absolute set. Unfortunately it’s not really feasible to change this because of our frames.
Any ideas on how to work around that?
Thanks
8 April 2008, 8:05 amSandeep Akhare says:
Hi Ramesh,
I am using AjaxToolKit version 1.0.20229.0 in my application. I was facing
issue in IE 7.0 when Modalpopup is shown the whole UI was getting screwed.
I made changes as per your solution it Works! Thank you very much
But Now the issue is in IE 6.0 it is adding lot of space the browser due to
which user can scroll down using vertical scroll to indefinite.
Please let me know if know the fix.
Thanks
28 June 2008, 12:09 pmSandeep
Ieuan says:
Hi, any chance you could sent the new version to me as well. I’m not really a C# programmer so I get very nervous changing the classes like this.
ieuan_johns@hotmail.com
7 July 2008, 7:06 amRamesh Bhaskar says:
@Sandeep
I haven’t worked with that version of the toolkit, however, I imagine the fix should be somewhat similar.
@Ieuan
I’ve sent it to you.
7 July 2008, 10:23 amSandeep Akhare says:
Hi Ramesh,
9 July 2008, 7:51 amGot the solution for it i just commented few line of code in one of the js file now its working thanks for your reply
mangesh says:
Hi Sandeep Akhare,
I am very curious about the lines(in js file) you have commented and which fixed your issue. Let me know it.
21 July 2008, 8:07 amvishal says:
in the initialize function
replace this line:
this._foregroundElement.style.position = ‘fixed’;
with
if (this._isIE6)
this._foregroundElement.style.position = ‘fixed’;
else
this._foregroundElement.style.position = ‘absolute’;
and this line:
23 July 2008, 3:45 pmthis._backgroundElement.style.position = ‘fixed’;
with
if (this._isIE6)
this._backgroundElement.style.position = ‘fixed’;
else
this._backgroundElement.style.position = ‘absolute’;
this solve the position problem of modalpopup on browser IE6.