Flex: Changing the color of the background color of your Pop Ups

I have encountered situations when there's a need to have more than 1 type of background color in your Flex Application. Some Popups might need a black background with 50% opacity some might requires a background with 0% opacity, etc. One of the easiest way to change the background color of the popup will be the step of changing the global styles, but as your Flex Application gets more and more complex, manipulating with the global styles wouldn't be a recommended way of doing things. Hence, I'm going to show you another way of manipulating the background color of your popup today.

The following would be the source code of my main Application.

 
 
  global{
   modalTransparency:0;
   modalTransparencyBlur:0;
   modalTransparencyColor:0;
   modalTransparencyDuration:100;
  }
 
 
 

View that contains some buttons

Here comes the important part.
This would be my class that acts like a Pop Up background.

package com.popup
{
 import mx.containers.Canvas;
 import mx.core.Application;
 
 //This class acts as the background in the PopUpManager CLass
 public class PopUpBackground extends Canvas
 {
  public function PopUpBackground()
  {
   super();
   this.height = Application.application.height;
   this.width = Application.application.width;
   this.validateNow();
  }
 }
}

This would be my main class that will be replacing the use of PopUpManager.

package com.popup
{
 import flash.display.DisplayObject;
 
 import mx.collections.ArrayCollection;
 import mx.core.Application;
 import mx.core.IFlexDisplayObject;
 import mx.managers.PopUpManager;

 public class PopUpOverlay
 {
  /** Only one instance of the PopUpOverlay allowed **/
  private static var instance:PopUpOverlay;
  //This is used to store the various Pop Ups
  private var arrayPopupList:ArrayCollection = new ArrayCollection();
  
  public function PopUpOverlay(singletonEnforcer:SingletonEnforcer)
  {
  }
  
  public static function getInstance():PopUpOverlay
  {
   //Create an instance of PopUpOverlay
   if(instance == null) { 
    instance = new PopUpOverlay(new SingletonEnforcer()); 
   } 
   return instance; 
  }
  
  public function createPopUp(parent:DisplayObject, className:Class
    , modal:Boolean = true, backgroundColor:uint = 0xFFFFFF
    , alpha:Number = 0.5):Object
  {
   //If a parent view is not specified, create the 
   //popup on the main Application
   if(parent == null)
   {
    parent = Application.application as DisplayObject;
   }
   //Create the background of the Pop Up using PopUpBackground first
   var tempDisplayObject:* = PopUpManager.createPopUp(parent,PopUpBackground,modal);
   tempDisplayObject.setStyle("backgroundColor", backgroundColor);
   tempDisplayObject.setStyle("backgroundAlpha", alpha);
   this.arrayPopupList.addItem(tempDisplayObject);
   
   //Next, Create the real Pop Up specified by the className
   tempDisplayObject = PopUpManager.createPopUp(parent,className,modal);
   PopUpManager.centerPopUp(tempDisplayObject);
   this.arrayPopupList.addItem(tempDisplayObject);
   return tempDisplayObject;
  }
  
  public function removePopUp():void
  {
   //Remove the create Pop Up View first
   if(this.arrayPopupList.length > 0)
   {
    var tempDisplayObject:IFlexDisplayObject = this.arrayPopupList.removeItemAt(this.arrayPopupList.length - 1) as IFlexDisplayObject;
    PopUpManager.removePopUp(tempDisplayObject);
   }
   //Followed by the background
   if(this.arrayPopupList.length > 0)
   {
    tempDisplayObject = this.arrayPopupList.removeItemAt(this.arrayPopupList.length - 1) as IFlexDisplayObject;
    PopUpManager.removePopUp(tempDisplayObject);
   }
  }
 } 
}
class SingletonEnforcer{};   

* Click here to view the demo of this example.
^ Click here for the source files of this demo.