How to popup a transparent Panel that is dismissed when clicked outside of it in Flex 4

Question

I need to popup some buttons in Flex 4. Users should be able to see the background (ideally a little faded, but not important) around and in between the buttons. And clicking anywhere except the buttons should dismiss them all.

So I created a spark Panel and added a spark VGroup with some buttons. Then I call

PopupManager.addPopUp(myNewPanel, background, true);

My 2 main problems are the panel is not transparent and clicking outside the buttons doesn't dismiss them... How do I implement that?

UPDATE: Figured out how to dismiss the popup when clicking outside the panel with:

    addEventListener("mouseDownOutside", close);

    private function close(event:FlexMouseEvent):void {
        PopUpManager.removePopUp(this);
    }

Now I just need to figure out how to make the Panel transparent so you can see the background around and in between the buttons.

Answer 1

You should use FlexMouseEvent.MOUSE_DOWN_OUTSIDE instead of the string "mouseDownOutside". Code completion, compile-time checking and makes it easier for others to read your code.

For the background, you can use css to style it. Heres a list of all the css properties for a spark panel - http://docs.huihoo.com/flex/4/spark/components/Panel.html#styleSummary