Recently I had to work with the ModalPopupExtender that comes with the AjaxControlToolkit. I’ve worked with it before, but this time it posed a couple of problems (that were caused not because of the toolkit, but rather other things).

Without specifying the “X” and “Y” attributes of the ModalPopUpExtender(MPE) it is supposed to, by default, render at the center of the screen. Sometimes this doesn’t happen. The solution to getting it to render at the center of the screen is adding the following doctype to your page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Even then, my page didn’t seem to display the popup right. Its only later that I discovered that I was using Response.flush on the page to display a “Loading…” screen. This causes the html used for the “Loading…” screen to be the first thing on the page.

Since the DOCTYPE is now forced down the page, the rest of the page does not render as per the specified DOCTYPE. This causes the MDE to render at some other position on the screen (other than the center).

To fix this, Response.Write and Flush your DOCTYPE tag first, so it becomes the first line on the page.

11 Comments

  1. Satyendra says:

    Thank you very much!

    It saved lot of my time.

  2. Ramesh Bhaskar says:

    @Satyendra

    You are welcome :) . This gave me quite a headache too :D

  3. Ramesh Bhaskar » Blog Archive » Fixing modalpopupextender DOCTYPE problems says:

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

  4. Sam says:

    Hey.. thanks buddy.

    I am facing the problem for a long time period. Finally your blog save my day.

    wow…..

  5. Ramesh Bhaskar says:

    @Sam
    Glad it helped :)

  6. TC says:

    I am getting this problem although the DOCTYPE statement is the first line of code on my aspx page (after page and register)… I had to go around with the popup not centering initially by executing a js scroll function on body onload.. My popup is executed on server side (popup.show())

  7. TC says:

    What does it mean to Response.Write and Flush your DOCTYPE tag first?

  8. Ramesh Bhaskar says:

    @TC
    The problem I was facing was because my Page.Load event had some contents being written out to the response stream via Response.Write. What happens here is that whatever you have pushed out using Response.Write gets written as the first thing on your page (If you do a view source of your page you will notice that). Therefore, for the DOCTYPE to truly be the first thing on your page, you first use Response.Write to push your it out.

    Note: This solves the issue only if it is the same as the problem I was facing. Also, make sure you are using the right DOCTYPE.

  9. Yechiel Zidell says:

    Hi ramaesh,

    I am having a very difficult time with a modalPopup centering issue.
    I have several modalPopups on the page - they all work fine.
    I also have a grid with an icon in each row that displays a modalPopup as well.
    When I launch the modalPopup from the grid in ie, it centers properly in the middle of browser page.
    However in FireFox, it centers the top left corner of modalPopup in the middle of the page causing the modalPopup to appear in lower right portion of the page.

    Can you please help me?
    I would greatly appreciate it.

  10. Ramesh Bhaskar says:

    @Yechiel
    I tried something similar in Firefox but it seemed to work fine for me. This used to happen before I made a change to the DLL itself.

  11. Kent says:

    Is it me or is it just silly that when they “center” they put the left edge on the center and the top on the center rather than putting the center truly at half the height and half the width. You can modify this yourself using a negative margin but the drop shadow does not work then and you must create your own.

Leave a Reply