Fixing modalpopupextender position 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.
Hi, I have been struggling with this ModalPopup not positioning correctly for some time and I’m
glad 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!
Please disregard my earlier question. I think I figured out how to change the dll and add it to
my 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!
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
frustration trying to figure this thing out.
@Heather
Glad 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?
Sure, I had originally put a tag around the modal popup panel, and I think it was set to
position: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!
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.
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.
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.
@Richard
Glad it helped
@Andrew
I’ve sent it to you.
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
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
Sandeep
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
@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.
Hi Ramesh,
Got the solution for it i just commented few line of code in one of the js file now its working thanks for your reply
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.
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:
this._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.
Hi Ramesh,
I’m having some difficulties with the ModalPopup and unfortunately I do not know much about dlls’. Would it be possible to email the dll as well? My friends in the coding department are hesitant to change the code in the toolkits.
Thanks,
Mars
@Mars
Sent. Please not however that you might be using a later version of the dll than I have sent.
Hi Ramesh,
unfortunately I am still having problems with centering in IE6 even after applying ur changes.
Let me know if there are any other changes you guys made?
Also I am using in the master page is going to
affect.
Thanks
Fortunately, everything worked for me. thanks.
Hi Ramesh,
I’m a newbie with asp.net and Ajax and I have no experience with compiling or recreating dlls?
Would it be possible to send me the dll as well?That would be great!
Thank you for your effort!
Best regards Andreas
@Andreas
Sent.
Many Thanks, thats article help me a lot!!!
Hi Ramesh,
I came across the modal position issue when viewed in Netscape 7.1.
Im hoping your solution is a fixit, could you mail copy of .dll
Many thanks for sharing!!! cheers Paul