3 Replies Latest reply on Nov 18, 2009 6:17 PM by abeymg

    Modal background options

    abeymg Level 1

      How do you change the modal transparency, blur and color in the new Flex 4

      Spark model, when using the PopUpManager ? Using a global style like below does not seem to work..

       

      global
      {
          modal-transparency: 0;
          modal-transparency-blur: 3;
          modal-transparency-color: #ff0000;
          modal-transparency-duration: 100;
      }

        • 1. Re: Modal background options
          Peter deHaan Level 4

          abeymg,

           

          This worked for me in Flex 3.5 and 4.0.0.11944:

           

          <?xml version="1.0" encoding="utf-8"?> 
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
              <mx:ApplicationControlBar dock="true">
                  <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" /> 
              </mx:ApplicationControlBar> 
              <mx:Style>
                  global {
                      modal-transparency: 0.5;
                      modal-transparency-blur: 2;
                      modal-transparency-color: red;
                  }
              </mx:Style>
              <mx:Script>
                  <![CDATA[
                      import mx.controls.Alert;
                  ]]>
              </mx:Script>
              <mx:Button click="Alert.show(mx_internal::VERSION, 'Alert title');" />
          </mx:Application>
          

           

           

          Peter

          • 2. Re: Modal background options
            Peter deHaan Level 4

            Actually, I just noticed that your modal transparency style is set to 0.0 (0%), which explains why the transparency color isnt showing up. Try setting the modal-transparency style to 0.1 (10%) and you should see your color, blur, and everythinge else:

             

            <?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/halo">
                <s:controlBarContent>
                    <s:Button label="Modal Alert" click="Alert.show(mx_internal::VERSION, 'Alert title');" />
                </s:controlBarContent> 
                <fx:Style>
                    @namespace s "library://ns.adobe.com/flex/spark";
                    @namespace mx "library://ns.adobe.com/flex/halo";
                    global {
                        modal-transparency: 0;
                        modal-transparency-blur: 3;
                        modal-transparency-color: #ff0000;
                        modal-transparency-duration: 100;
                    }
                </fx:Style>
                <fx:Script>
                    <![CDATA[
                        import mx.controls.Alert;
                    ]]>
                </fx:Script>
            </s:Application>
            
            

             

            Peter

            • 3. Re: Modal background options
              abeymg Level 1

              Thanks Peter. Your sample works correctly and helped me figure out the issue.

               

              I was adding the global style to a Flex app that was being loaded into a parent Flex app using the SWFLoader, and that doesn’t work.

              Adding the style to the parent app fixed it.

               

              - abey