Centering a PopUp in Flex

On November 22, 2007, in Flex, by Anuj Gakhar

If you are using PopUpManager and TitleWindow to create a popup window in Flex, you have probably run across this problem already. The createPopup() function takes first argument as the owner of the popup window. And when you do PopUpManager.centerPopup(this) , it centers the popup. But it only centers the popup relative to its parent component, which means if you are creating the popUp from lets say a Sidebar control, the popup will not be in the center of the page but in the center of the sidebar which can look messy.

Here is what you can do to solve this.

[xml]
_class(PopUpManager.createPopUp(owner, _class, modal) ;
[/xml]

Instead of the above, you can do this :-

[xml]
_class(PopUpManager.createPopUp(UIComponent(this.parentApplication), _class,
modal) ;[/xml]

I have used _class here to represent the actual TitleWindow classs you will be using. And notice how I pass the parentApplication as a UIComponent to the owner of the popup.
What this does is, it changes the owner of the PopUp to the main Application file which in return centers the Popup in the page when you call PopUpManager.centerPopUp(this).

Tagged with:  

29 Responses to Centering a PopUp in Flex

  1. I’ve been trying to figure this out for a few hours now and it’s been driving me crazy! I use popup components all the time and I normally parent them to the application, but I guess this time I didn’t and it was the root of all my confusion. Thanks for the reminder! Moral of the story: you probably don’t want to create a popup on anything but the Application.application (or this.parentApplication).

  2. Anuj Gakhar says:

    Yup, thats true. When I first worked on it, I spent a couple hours as well. Its just one of those things!

  3. Lamb Cam says:

    This is just what I was looking for… gone are the days of the popup centering in my datagrid cell 😀

  4. Chris H says:

    good info, thanks!

  5. abhishek says:

    hello ,
    i want to show popup form from anather popup, but it going to left side of the screen , bot at center

  6. Anuj Gakhar says:

    @Abhishek,

    can you please show your code ?

  7. This causes problems when the application is larger than the screen and they are scrolled to the top or the bottom, and thus the ‘center’ of the application is not the center of the viewable area.
    Not sure of a workaround yet, searching for one now.

  8. Anuj Gakhar says:

    @Seth, sounds about right. Would you please post a solution here as well when you find any. Cheers.

  9. I didn’t find a way short of calling javascript to see the scroll position of the page and knowing where the swf started to calculate how far down they are in the app… but I was too lazy to implement this and instead just got the Y position of the click and centered it horizontally near that.
    code ended up looking like this:

    var pt:Point = new Point(lastEvent.target.mouseX, lastEvent.target.mouseY);
    pt = lastEvent.target.localToGlobal(pt);

    img.move(ui.width/2 – img.width/2, pt.y – img.height/2);

  10. mcfridge says:

    I know that for everyone else this is radically obvious, but to refer to the UIComponent(this.parentApplication)

    you must remember to import the UIComponent like:

    import mx.core.UIComponent;

  11. I ended up implementing a javascript function call to tell me what the Y position should be. This put it a bit above the center, which is more aesthetically pleasing for some reason.
    Below is the javascript. You can use it after putting it in the head of your page.
    Use
    var yPagePosition:Number = ExternalInterface.call(“getYCenter”);

    img.move(ui.width/2 – img.width/2, yPagePosition – img.height/2);

    =========================

    function getYCenter()
    {
    return (document.all?document.body.scrollTop:window.pageYOffset)+(window.innerHeight/2) – 160 /*findPosY(document.getElementById(“CollarfreeHomepage”))*/ ;
    }
    function findPosY(obj)
    {
    var curtop = 0;
    if(obj.offsetParent)
    while(1)
    {
    curtop += obj.offsetTop;
    if(!obj.offsetParent)
    break;
    obj = obj.offsetParent;
    }
    else if(obj.y)
    curtop += obj.y;
    return curtop;
    }

  12. Erik Ramalho says:

    Man,

    I spent hours trying to fix this thing!
    Amazing!
    Congratulations!

  13. oyasumi says:

    Thanx a lot!
    I spent a lot of time trying to center my popup…
    And here i came and i could make it in 10 seconds!

  14. Carrigaline says:

    Very, very useful.

    Thanks!

  15. MIke says:

    Thanks a lot man – great info!

  16. israel barba says:

    thanks a lot, this information is very useful

  17. Theresa says:

    Thank you, this was very helpful.

    I ran into problems when I would center the pop-up and then immediately start trying to pass data to the mxml components in the pop-up, but this was solved by passing the data first and then centering once everything else was complete.

    🙂

  18. Gustavo Pereira says:

    Thanks, works like a charm!

  19. Thanks a lot for posting this; this is a simple and effective solution to the problem I had.

  20. Thanks, I was worried about spending some hours to do this.

  21. Rafał says:

    Or..
    _class(PopUpManager.createPopUp(root, _class, modal) ;
    PopUpManager.centerPopUp(_class);

  22. Ricardo says:

    Thanks a lot! 😀 worked for me ^_____^

  23. jeammiers says:

    MUCHAS GRACIAS!!!! ha sido bastante util…

  24. Exola says:

    @ #10
    Might be obvious for some. Your comment was the solution for the problem I had. Thanks.

  25. shaman4d says:

    Thanks a lot! You allow me avoid hard debugging.

  26. kasibhat says:

    instead we can put to show pop up at center of screen::

    PopUpManager.addPopUp(_class,root,true);
    PopUpManager.centerPopUp(_class);

  27. Maknollram says:

    kasibhat your tip was very simple and helpfull, the root saved all my program, tnx.

  28. Ram Iyer says:

    I think this works perfect;

    var _class:MyPopUp = new MyPopUp();
    PopUpManager.addPopUp(_class, this.parentApplication as DisplayObject, true);
    PopUpManager.centerPopUp(_class);

  29. suchita says:

    I am trying to center Alert.error pop up , but it always gets positioned to the extreme left of the screen. I dont want to use PopUpmanager for centering. Is there any other way I can center Alert.error pop up. ????

Leave a Reply to Rafał Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: