When using modal popup extenders in a usercontrol the positioning of the popup panel tends to get a little awry. This is mainly due to the fact that it will be positioned in the center of its parent element. This however only happens when you make use of absolute or relative positioning

I bumped into this problem quite a few times while developping a CMS for the software company i’m working for and after a day or so searching Codeplex and other wonderfull sites i found a workaround;

What you probably want to do is:

in modalpopupbehavior.js comment out

//this._foregroundElement.parentNode.appendChild(this._backgroundElement);
if (document.forms != null && document.forms.length > 0) { document.forms[0].appendChild(this._backgroundElement);
document.forms[0].appendChild(
this._foregroundElement);
this._foregroundElement.style.zIndex = 10001;
}

basicly you would just attach the modal popup to the root of your DOM structure. This way it will always be in the center of you window.


I have found this solution on the web so all credits go the guy who found this out (i can’t recall the webpage, lemme know).

edit: for some reason a , is beeing added to all my textfields etc. in the modalpopup. There’s probably a logical explanation for this but i don’t see it atm ;-) so if anyone has a clue please post.

Update:

Okay, after messing around a bit with the workaround mentioned above i found out it’s kind of seriously flawed when used in complicated situations.

I came up with a new workaround myself this time and it seems to do the trick nicely;

in the masterpage of my project i add a simple div and call it “modaldiv”

then in the _layout function of modalbehavior.js i add the foreground element to this div (using appendChild) same goes for the background element.

I will post the code for this later on as i am at home while writing this.

  5 Responses to “asp.net ajax modalpopup extender not centered when used with position absolute or relative”

  1. fortunately the new CTP solves all these problems :)

  2. I am having the same problem. Will you please post your code?

  3. Could you please send me your code to buehler at iazi.ch, because I have the same problems. Thanks a lot in advance! Tom

  4. hey tom, if you downloaded the latest and greatest ctp of ajaxcontroltoolkit the problem should be solved, anyways here’s what you’ll need to change if you’d like to keep working in the older ctp;

    in modalpopupbehavior.js comment out

    //this._foregroundElement.parentNode.appendChild(this._backgroundElement);

    and add;

    if (document.forms != null && document.forms.length > 0) { document.forms[0].appendChild(this._backgroundElement);
    document.forms[0].appendChild(
    this._foregroundElement);
    this._foregroundElement.style.zIndex = 10001;
    }

  5. Thanks for posting that snip, Dries. I am building off of the version of the tookit for framework 2.0, and was able to fix the issue thanks to your post. I have one other problem: have you seen a case where drag behavior is not sticky, i.e. the modal pops back to the center when released?

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

   
© 2012 Dries Hoebeke on .NET Suffusion theme by Sayontan Sinha