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
[...] Ramesh Bhaskar - Fixing modalpopupextender position problems [...]
Hi Ramesh
I have same problem with modal popup. I really appriciate if you can send me new dll on my email addess
meghapatel102@gmail.com
Hi Ramesh
Its works for me. I really appriciate your help. Thank you
@Megha
Glad it worked
[...] Now go ahead and make the necessary changes to the files in the toolkit (I’ve written them out in a previous post here). [...]
hai ramesh i am new to .net ajaxcontrol toolkit
can u pls send the dll to my mail id
or tell me how to compile and make it as a new dll
nellai_n@yahoo.co.in
thanks in advance
Nellai
@Nellai
There is a new post on how to Re-compile the Ajax Control Toolkit (http://blog.rameshbhaskar.com/2008/12/05/re-compiling-the-ajaxcontroltoolkit/). Please go through it to re-compile it. If you still have issues let me know.
hi,
my problem is nested modal popup. my page is ok in ie7 but in ie6 there are background position problems. when the parent modal popup is shown, vertical scrollbar appears. when the child modal popup (that is shown by clicking a button on the parent modal popup) is shown, background starts from 0,0 point of the parent modal popup, not 0,0 point of the page. and also infinite vertical and horizontal scrollbars appear. please help.
@Mehmet
Never tried the modalpopup within modalpopup scenario. However, I have noticed the vertical scrollbars appearing on the page. I have not been able to get rid of them unfortunately (or have not tried enough to).
Thank you, this change saved my butt with getting the modalpopup to work with MOSS2007
hai ramesh
i have problems with modalpopup when i used 1.0.10301.0 version toolkit for Framework 2.0 then i used 1.0.10920.19506 version ajaxcontrol toolkit , my problems with modalpopup are resolved but after using this updateprogess control is not working. If your new dll can fix this issue.
can u pls send the dll to my mail id
nagakishore.vankadaru@pbsystems.com
thanks in advance
Kishore
After I did all the steps that you post, it didn’t work for me….I dont know, if im trying to show an updateprogress after move the scroll down, the background of the modalpopup doesn’t cover all my page…What can i do?…
if you have any solution after read this comment, plz send it to norf182@msn.com.
If you want to, I can send you my code, maybe Im doing something wrong.
@Kishore
Sent you the dll, hope it helps
Can you send me the new DLL? plz!
Thank you very much.
Can you pl send the dll
ramesh, can you please send me the dll after changes made by you to my email. iam unable to build the ajaxcontrol tookit it is giving me error when try to build.
Error 1 The element beneath element is unrecognized. C:\Downloads\AjaxControlToolKit Source code\AjaxControlToolkit\AjaxControlToolkit.csproj 545 7 AjaxControlToolkit
.
Thanks for your code it works……..
Hi Ramesh, I would be grateful if you could send me the dll too. Thanks vey much. Steve.
Hi Ramesh,
Thanks for you help. It really saved my Time.
I made all the changes suggested by you. But when i show modal popup extender the infinite scrollbar appears and extender appears hidden at the bottom of the page. Also the background does not gray out. Please suggest the solution or send the dll which can sole the same.
Hi Ramesh,
I would be grateful if you could send me the dll too, rvillarosajr@yahoo.com
Thanks.
Hi Ramesh,
Can You send me the new dll for IE7 on m.tausif@hotmail.co.uk
Thanks
Hi Ramesh,
Can You send me the new dll for IE7 on msaucedo2000@yahoo.es
Thank you very much
Hi Ramesh,
Can You send me the new dll? i dunno how to make new dll. Please send it to me at kalupahana79@gmail.com
I must seriously seriously thank you for this advice… I have been having problems with Internet Explorer 7 displaying modal popups since the very beggining. Altough the Ajax Control Toolkit I have have changed a lot since then… I managed to change the parameters so It renders correctly on any versions of Internet Explorer.
Once again THANKS… you made my life easier with this (I’ve been suffering with this for six months already).
Can you send me dll Plase
Can you send me dll Plase
julieta@rosariouser.com.ar
Hi bhaskar, cluld u plz send the new dll tome.please send the dll to the mail id
karthikladk@gmail.com
Giday Ramesh,
Brilliant stuff, this was giving me a headache for most of a day, I found this site, made the changes, complied the dll and voila! It now works in IE6. You sure know your javascript dude.
I had a little trouble finding the right source code to download for VS 2005, I found it at
http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=11121
under other “Other Available Downloads” . load up in VS 2005, make changes, complile, include on project - easy pesy!
Tim