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.

54 Comments

Heather GebbiaMarch 14th, 2008 at 12:10 am

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!

Heather GebbiaMarch 14th, 2008 at 1:19 am

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!

Heather GebbiaMarch 14th, 2008 at 1:48 am

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.

Ramesh BhaskarMarch 14th, 2008 at 4:22 am

@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?

Heather GebbiaMarch 15th, 2008 at 12:23 am

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!

Richard GraeberMarch 17th, 2008 at 11:07 pm

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.

Rich GraeberMarch 17th, 2008 at 11:08 pm

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.

AndrewApril 4th, 2008 at 4:42 pm

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.

Ramesh BhaskarApril 4th, 2008 at 9:03 pm

@Richard
Glad it helped

@Andrew
I’ve sent it to you.

JonApril 8th, 2008 at 8:05 am

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

Sandeep AkhareJune 28th, 2008 at 12:09 pm

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

IeuanJuly 7th, 2008 at 7:06 am

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

Ramesh BhaskarJuly 7th, 2008 at 10:23 am

@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.

Sandeep AkhareJuly 9th, 2008 at 7:51 am

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

mangeshJuly 21st, 2008 at 8:07 am

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.

vishalJuly 23rd, 2008 at 3:45 pm

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.

MarsAugust 28th, 2008 at 4:46 am

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

Ramesh BhaskarAugust 28th, 2008 at 10:05 am

@Mars

Sent. Please not however that you might be using a later version of the dll than I have sent.

RajAugust 29th, 2008 at 1:44 pm

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

ShriniSeptember 5th, 2008 at 4:26 pm

Fortunately, everything worked for me. thanks.

AndreasNovember 5th, 2008 at 4:54 am

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

Ramesh BhaskarNovember 5th, 2008 at 11:52 am

@Andreas

Sent.

Rafael BuenoNovember 6th, 2008 at 8:39 am

Many Thanks, thats article help me a lot!!!

PaulNovember 17th, 2008 at 12:01 am

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 [...]

meghaDecember 2nd, 2008 at 6:12 pm

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

meghaDecember 3rd, 2008 at 3:46 pm

Hi Ramesh

Its works for me. I really appriciate your help. Thank you

Ramesh BhaskarDecember 3rd, 2008 at 3:50 pm

@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).  [...]

NellaiDecember 20th, 2008 at 6:18 am

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

Ramesh BhaskarDecember 23rd, 2008 at 9:38 am

@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.

Mehmet UcarJanuary 15th, 2009 at 5:37 am

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.

adminJanuary 15th, 2009 at 7:19 am

@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).

McbeevFebruary 9th, 2009 at 8:12 am

Thank you, this change saved my butt with getting the modalpopup to work with MOSS2007

V Naga KishoreFebruary 18th, 2009 at 7:30 am

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

Norf182February 19th, 2009 at 1:35 pm

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.

Ramesh BhaskarFebruary 19th, 2009 at 3:49 pm

@Kishore

Sent you the dll, hope it helps

Norf182March 3rd, 2009 at 2:52 pm

Can you send me the new DLL? plz!

Fatih AkpınarMarch 11th, 2009 at 4:24 am

Thank you very much.

KarthikeyanMarch 19th, 2009 at 8:32 am

Can you pl send the dll

shahMarch 25th, 2009 at 2:45 am

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
.

MamataApril 3rd, 2009 at 5:07 am

Thanks for your code it works……..

Steve RobinsonMay 6th, 2009 at 1:49 am

Hi Ramesh, I would be grateful if you could send me the dll too. Thanks vey much. Steve.

KishoreMay 6th, 2009 at 10:44 am

Hi Ramesh,

Thanks for you help. It really saved my Time.

Khushbu BhatewaraMay 20th, 2009 at 5:35 am

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.

Reynaldo V. Villarosa, Jr.June 24th, 2009 at 7:57 pm

Hi Ramesh,

I would be grateful if you could send me the dll too, rvillarosajr@yahoo.com

Thanks.

TausifJune 30th, 2009 at 5:18 am

Hi Ramesh,
Can You send me the new dll for IE7 on m.tausif@hotmail.co.uk

Thanks

M. CruzAugust 7th, 2009 at 2:38 am

Hi Ramesh,

Can You send me the new dll for IE7 on msaucedo2000@yahoo.es

Thank you very much

Sujith KalupahanaAugust 23rd, 2009 at 9:57 pm

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

Ivan HanakazeSeptember 28th, 2009 at 11:12 am

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).

JuliOctober 20th, 2009 at 6:35 am

Can you send me dll Plase

JuliOctober 20th, 2009 at 6:36 am

Can you send me dll Plase
julieta@rosariouser.com.ar

karthikNovember 26th, 2009 at 4:05 am

Hi bhaskar, cluld u plz send the new dll tome.please send the dll to the mail id

karthikladk@gmail.com

TimDecember 9th, 2009 at 1:15 am

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

Leave a comment

Your comment