how to change background color of PopUp window in flex

Question

I have developed a application where it contains few PopUp windows. whenever popup comes the background of the popup is little brighter, is there any way that i can make PopUP Background little darker.

Thanks in Advance..

Thanks for the quick reply Anton, but i require the same thing for my custom component which pop ups using PopUpManager class... — user2143071
Which component is extended by you to create your custom one? — Anton
I have added a new example to my answer. Do you mean something like this? — Anton

Anton Anton · Accepted Answer · 2013-04-11T17:31:41

If you mean the Alert component, you can do something like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
           creationComplete="Alert.show('Hello!')">
<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    mx|Alert {
        backgroundAlpha: 0.4;
        backgroundColor: #00ff00;
    }
</fx:Style>

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
    ]]>
</fx:Script>

</s:Application>

//the result

enter image description here

//EDIT

If you want to use a custom component, it can look like this:

//MyAlert.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" width="175" height="100">
<fx:Script>
    <![CDATA[
        import mx.managers.PopUpManager;

        protected function onOkClick(event:MouseEvent):void
        {
            PopUpManager.removePopUp(this);
        }
    ]]>
</fx:Script>

<s:Rect top="0" bottom="0" left="0" right="0">
    <s:fill>
        <s:SolidColor color="0x00ff00" alpha="0.4"/>
    </s:fill>
</s:Rect>

<s:VGroup horizontalAlign="center" width="100%" height="100%">
    <s:Spacer height="10"/>
    <s:Label text="Hello!"/>
    <s:Button label="Ok" click="onOkClick(event)"/>
</s:VGroup>
</s:TitleWindow>

call it from the application:

var myAlert:MyAlert = new MyAlert();

PopUpManager.addPopUp(myAlert, this, true);
PopUpManager.centerPopUp(myAlert);

//the result

enter image description here

how to change background color of PopUp window in flex

1 Answers