.NET Discussion

.NET Issues, Problems, Code Samples, and Fixes

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!

Advertisements

August 14, 2007 - Posted by | AJAX, AJAX Toolkit, ASP.NET, Bugs, CSS, FireFox, IE6, IE7, ModalPopupExtender

20 Comments »

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

    Comment by Surakit Hirunrattanakorn | August 16, 2007 | Reply

  2. 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!

    Comment by Some.Net(Guy) | August 16, 2007 | Reply

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

    Comment by Surakit Hirunrattanakorn | August 16, 2007 | Reply

  4. 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?

    Comment by Some.Net(Guy) | August 17, 2007 | Reply

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

    Comment by eniac | November 29, 2007 | Reply

  6. Eniac –

    Have you tried upgrading your Ajax Tool Kit DLL?

    Comment by Some.Net(Guy) | November 30, 2007 | Reply

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

    Comment by jt | February 4, 2008 | Reply

  8. Hi,
    I also had the same problem. Just upgrading browser from IE6 to IE7 solved this problem.

    Comment by Sanjay Santra | June 11, 2008 | Reply

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

    Comment by Dude | August 13, 2008 | Reply

  10. 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 ”

    Comment by Kurt | August 22, 2008 | Reply

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

    Comment by Kurt | August 22, 2008 | Reply

    • Thanks for this. I was debugging for hours. Turns out it was the DOCTYPE for me too.

      Comment by Paul Marangoni | November 21, 2009 | Reply

  12. 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!

    Comment by Some.Net(Guy) | August 22, 2008 | Reply

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

    Comment by Kurt | August 22, 2008 | Reply

  14. 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?????????????????

    Comment by ketan | February 2, 2009 | Reply

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

    Comment by Patrik Lindström | March 2, 2009 | Reply

  16. Hi,
    I am using Ajax popup extender to show group of web user controls with functionality. When I perform postback on any of the controls, it simply closes…Can anyone help me with this.

    Thanks,
    Srini

    Comment by srini | February 22, 2010 | Reply

  17. i am using modalpopup extender

    but in ie6 its creating problems .In that backgroundcontrols seems to be visible

    Comment by sameera | August 12, 2010 | Reply

  18. plssssssss help

    Comment by sameera | August 12, 2010 | Reply

  19. sir,
    Can you give me simple review about profile base class and theme concept that stored in database and user come to next time then he want appear last theme what he save.

    Comment by rajiv | August 13, 2010 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: