5 Replies Latest reply on Mar 23, 2011 5:34 PM by Dan Zen

    Modal popup background color

    daslicht Level 2

      Hello,

      when you add a modal Popup the rest of the application is "grayed out" (disabled).

       

      How can I change this color ? A dark color would be better matching.

       

      Capture.PNG

        • 1. Re: Modal popup background color
          BhaskerChari Level 4

          Hi daslicht,

           

          You can use modalTransparencyColor="#000000"  on the main application root tag..so that this color will be applied for all modal windows.

           

          <mx:Application modalTransparencyColor="#000000/>

           

           

           

          Thanks,

          Bhasker

          • 2. Re: Modal popup background color
            sekhar7650

            Hi

             

            model pop up background color source code it is useful to you

             

             

             

            <?xml version="1.0" encoding="utf-8"?>

             

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

             

            layout="vertical"

             

            verticalAlign="middle"

             

            backgroundColor="white"

             

            creationComplete="init();">

             

             

             

            <mx:Script>

             

            <![CDATA[

             

            import mx.controls.Alert;

             

            import mx.styles.StyleManager;

             

             

             

            private var alert:Alert;

             

            private var alertCSS:CSSStyleDeclaration;

             

             

             

            private function init():void {

             

            alertCSS = StyleManager.getStyleDeclaration("Alert");

             

            }

             

             

             

            private function showAlert(color:Object):void {

             

            alertCSS.setStyle("modalTransparencyColor", color);

             

            alertCSS.setStyle("themeColor", color);

             

            alert = Alert.show("The quick brown fox...");

             

            }

             

            ]]>

             

            </mx:Script>

             

             

             

            <mx:ApplicationControlBar dock="true">

             

            <mx:Button label="Red"

             

            themeColor="red"

             

            click="showAlert('red');" />

             

            <mx:Button label="Orange"

             

            themeColor="haloOrange"

             

            click="showAlert('haloOrange');" />

             

            <mx:Button label="Yellow"

             

            themeColor="yellow"

             

            click="showAlert('yellow');" />

             

            <mx:Button label="Green"

             

            themeColor="haloGreen"

             

            click="showAlert('haloGreen');" />

             

            <mx:Button label="Blue"

             

            themeColor="haloBlue"

             

            click="showAlert('haloBlue');" />

             

            </mx:ApplicationControlBar>

             

             

             

            </mx:Application>

             

            regards

            sekhar7650

            1 person found this helpful
            • 3. Re: Modal popup background color
              BhaskerChari Level 4

              Hi sekhar,

               

              This will work only for Alert window modal popup's but not for the popup's opened using PopUpManager class but its a good approach for dynamically changing the Alert css styles in AS.

               

              But by specifying the modalTransparencyColor on root application tag applies to all modal windows including the Alert windows.

               

              Thanks,

              Bhasker

              1 person found this helpful
              • 4. Re: Modal popup background color
                daslicht Level 2

                modalTransparencyColor ="#000000"

                 

                This property is not available for a Spark Application, but I just found this:

                 

                <fx:Style>
                        global {
                        modalTransparencyBlur: 0;
                        modalTransparency: .5;
                        modalTransparencyColor: #000000;
                        }

                </fx:Style>

                 

                and

                 

                 

                http://forums.adobe.com/thread/526872

                 

                 

                modalTransparencyColor was the keyword I was looking for , thakt you very much !

                • 5. Re: Modal popup background color
                  Dan Zen Level 1

                  Also, if you want to change just the modal properties for a specific spark component in a popup then set the spark component styleName="modalStyle" or some such thing and then in your style tag do something like (so it does not have to be put in a global style):

                   

                  <fx:Style>

                       .modalStyle {modal-transparency: .1; modal-transparency-blur:1;}

                  </fx:Style>