Flex 4.5: custom background for popups

Question

In Flex, when you use PopUpManager for popup windows, there is a background rectangle appearing over the application and behind the popup window itself. What I need is to override that default overlay rectangle with the custom one (in order to round the corners, apply gradient fill, etc). How can this be achieved?

There are some basic styling options, which do not include rounded corners or gradients. Other than that you'll have to not use PopUpManager. PopUpAnchor and SkinnablePopUpContainer are some alternatives, but it's hard to tell which would fit your needs. — RIAstar

Ilya Zaytsev Ilya Zaytsev · Accepted Answer · 2013-02-27T11:17:44

You can only change transparency, color and blur with css. See example:

global {
    modalTransparency: 0.7;
    modalTransparencyBlur: 0;
    modalTransparencyColor: "0x000000";
}

Second way (if you want own design with round the corners, apply gradient fill, etc) Create custom popup window (like TitleWindow) and when popup created or closed, dispatch from window custom event like:

dispatchEvent(new Event('addPopup', true));

In main application listen event:

systemManager.addEventListener("addPopup", onAddHandler, false, 0, true);

And then you can display own layer with custom design.

protected function onAddHandler(event:Event):void
{
    // show custom background layer
}

Flex 4.5: custom background for popups

1 Answers