ASP.NET AJAX Toolkit: ModalPopupExtender Issues in IE6
While working on my newest creation, PROUDWear Sports, I’ve run into a little snag trying to implement the ModalPopupExtender. Of course it works fine in IE7 and FireFox, but in IE6, it just refuses to work correctly. I’m pretty sure that I’ve implemented it correctly, but one can never be too sure. I watched the How Do I: Use the ASP.NET AJAX ModalPopup Extender Control video provided by Microsoft and followed it pretty much exactly, except including my own functionality (which is essentially nothing! Basically showing a picture in the hidden panel with a close button, that’s it.) and still it refuses to work in IE6.
I posted in the ASP.NET forums about my issue a few minutes ago, detailing my total problem (6th post down, you can find it by searching for “.NET Discussion”). If you don’t want to go there, basically what happens is in IE6, instead of properly displaying the chosen modal panel, it displays the panel inline with the rest of the page and then goes modal, rendering the page inaccessible to the user.
If anyone has any suggestions, please please let me know. Thanks!
Status: Solved! (8/17/07)
Solution: Upgrade your AJAX Toolkit DLL. This version is not the newest version, but the ModalPopupExtender functions correctly in IE6 when this one is applied. I am not using the latest version because the accordion control does not function correctly in the newer versions. When they fix that, I will go to the newest version.
WHEW!
15 Comments »
Leave a comment
About
This blog is for nothing else than to try and help me help you and help you help me and us help everyone else try to fix anything and everything we can’t figure out with this language. I’ve got a pretty good handle on it as I’ve been doing it for several years, and can help with a lot, but I definitely don’t claim to know everything. That’s where you come in 
If you’re interested in joining the discussion to post your own problems, fixes, etc. in an actual post, just email me or comment somewhere and we’ll talk about it.
-
Recent Comments
-
RSS Feeds
RSS Feed
Hi
I had the exactly the same problem.
I just figured it out that it is a class in my CSS which link with the Master Page. The Possition:Relative; tag causing all my problem as soon as I deleted it, the modal popup shown.
Thank to Joe Stagner from Microsoft who give me a Hints that it is something wrong in the CSS, so I did remove and test it one by one.
Hope this useful to you : )
Thanks for the comment, Surakit. Unfortunately, this has not done anything for me, as I never had position: relative; in my CSS to begin with. I experimented with the position attribute in my CSS to no avail. The mystery lives on :\
Did you mess with the CSS in your PopUpControl (ie, the control described by the PopUpControlID) or what? Maybe I messed with the wrong CSS, although I never declare position on anything, unless it is to be absolute, and even that is extremely rare.
Thanks!
Hi
Here is my situation, I have a master page that link to this CSS (the one that caused the problem). And the MDE is in an web user control which contained in an aspx page that use the master page.
The attribute in CSS then effect everything under the Master page.
Here is what I did just to test that it is a CSS problem,
I created new CSS, Master page, ASPX page and a new web user control with MDE in it. Everything do not have any link to any CSS file or not even a style attribute in each of it’s element. so when you run the page you will get a really plain page with a popup working, that when i figured that it is really CSS problem.
then I start to add each css attribute one by one to see which one that effect MDE.
I hope this help.
Sukarit-
You are right! Well, you are half right. It is, in fact, a CSS problem. However, it’s also an AJAXToolkit problem as well. Here’s why:
I did what you said, created an unrelated page with no styles. MPE works ok in IE6, even though the positioning is off (when I set the X and Y, it still appears inline with the page. Also it flickers.) and I can still interact with the rest of the page. However, as soon as I apply a background color to the MPE’s backgroundcssclass’s class (.modal {background: #CCCCCC;} it no longer works. A big, grey screen shows up and nothing can be done on it. Just for experimentation, I removed the css class and added a dropshadow via the MPE’s attribute. Just as I suspected, a giant black box covered my popup panel.
What appears to be happening is that the order of things being applied is off. It seems that first the MPE pops up the panel in the page, then the attributes are applied (css, dropshadow, etc).
I don’t know what to do! It just simply does not work in IE6.
NOTE: I am not using the most current release, and this is because in the most current release, the accordion control is messed up, and I need the accordion control to function correctly. Could this be the problem?
I have a similiar problem. The modal popup works fine in ie7 locally, but when going to a vmware guest OS, w2k pro with ie6, the popup hangs ie6 with 100% utilization. Removing the styles from the externally linked style sheet fixes the problem.
Also, I’m not sure if the problem are related, but my styles differ depending on if i reference the web application with the server name or ip (e.g. http://192.168.1.101/App/Page.aspx)
In conclusion, I’m not sure what the problem is. I don’t have much experience debugging ajax so I’m going to eliminate the popup and merge the functionality into the main flow of the website. Popups are rather annoying and bad practice anyways.
eniac
Eniac –
Have you tried upgrading your Ajax Tool Kit DLL?
I had a similar issue, working in ie7 and firefox but not opening in ie6. Setting the height on the asp:panel fixed the issue.
Hi,
I also had the same problem. Just upgrading browser from IE6 to IE7 solved this problem.
Sanjay, dude, I hope you’re not doing this for a living. Seriously. Upgrading your browser may fix what you see, but would not solve anything at all for, you know, all of the IE6 visitors to the site, if a problem exists.
My problem with IE6 and the ModalPopup is that it causes my background element to become huge, and the popup panel stays in its original spot instead of centering on the screen. I tried the ModalPopup demo on the http://www.asp.net site and it was working fine. I took a look at the DOCTYPE settings for their page vs my page and found that they were different. When I changed my DOCTYPE to match theirs, the problem was fixed. However, then a bunch of other stuff on my site started displaying differently. Oh well. Now I am back to square one and will probably have to abandon the ModalPopup for now. In case you are interested, the DOCTYPE that worked was ”
Oops. The DOCTYPE did not display in my comment, probably because it was in html tag brackets. I will try it here without the brackets, ‘?xml version=”1.0″ encoding=”UTF-8″?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”‘ Sorry if it doesn’t work, but you can always go to http://www.asp.net to see it for yourself.
Kurt –
Thanks for the heads up! Go ahead and try to repost the DOCTYPE if you can, apparently it got eaten by WP. As for which DOCTYPE you should use, at this point in the progression of the internet, you should probably be using some sort of XHTML doctype.
Thanks for the comment!
The DOCTYPE that did not work in IE6 with the ModalPopup was (!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”). The DOCTYPE that did work in IE6 with the ModalPopup was (?xml version=”1.0″ encoding=”UTF-8″?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”). But, like I mentioned, it messed up some of my existing CSS on the site.
Hi,
I have problem with modalpop-up in IE 6..
problem is that when i click once on button refreshed but not displaying pop-up. same button i click second time then it works fine?????????????????
I envoke the modalpopup from a imagebutton in Gridview. It works fine as long as I do not add the Dropshadow=”true” for the modalpopup extender. In the http://www.asp.net tutorial video he adds a dropshadow just because its cool. But I’ll be pragmatic and skip the dropshadow for my application for now on at least.