Posted on by JesterXL

Changing the Modal Color

When you create popups in Flash or Flex, you have the option of making them modal. This means that no other content below the window can be clicked on or interacted with. This forces the user to deal with the popup, usually a Window containing an important form, such as a Login window or an Alert that is asking a question.

You do this by setting the 3rd parameter of PopUpManager.createPopUp to true. By default, Flash and Flex make this modal window invisible. It’s basically this big shield the size of your application that prevents mouse clicks from going through. Some other magic happens behind the scenes to prevent keyboard commands from slipping through.

While you can skin this invisible shield via editing the symbol PopUpManager uses to create it, called “Modal”. If you just want to set the color to something other than white, I haven’t gotten styles to work with it. You can set the alpha of this shield; the common value is 50%:

setStyle(“modalTransparency”, 50);

For the color, you need to get a specific reference to it. There is probably a cleaner way, but this works in both Flash and Flex 1.5:

import mx.managers.PopUpManager;
import mx.containers.Window;

private function initApp():Void
{
        setStyle("modalTransparency", 50);
        var ref = PopUpManager.createPopUp(this, Window, true);
        ref.setSize(320, 240);
        var c:Color = new Color(ref.modalWindow);
        c.setRGB(0x660000);
}

All popups are created with a reference attached (a.k.a. decorated) to them in the form of giving them the property of modalWindow. This might be pre-defined in UIObject or something allowing strict typing to work. Regardless, now you have a color choice other than white!

9 Replies to “Changing the Modal Color”

  3. If you don’t want it to be seen, either:

    setStyle(‘modalTransparency’, 0);

    or, to truly hide it:

    ref.modalWindow.visible = false;

    or, to never show it at all, just pass false to the 3rd parameter of createPopUp.

  5. Hrm… my guess is, it’s responding to how the Window normally responds to events. A hack might be:

    yourWin.enabled = false;

  7. Hi Jesse

    First of all, thanks for posting such useful Flash tutorials/instructions… they’ve been very helpful for me!

    I was wondering if you can give an example of how to integrate this modal background coloring with the code produced in your LoginForm tutorial. I can’t seem to get it to work (I have been trying to add it to the ‘init’ function containing the popupmanager but no dice).

    Thanks!
    – philip

  8. oh, never mind about my msg regarding integrating this with your LoginForm tutorial… I finally figured it out. Thanks!

  9. ‘Some other magic happens behind the scenes to prevent keyboard commands from slipping through.’

    Looks like that magic breaks down if you have more than one modal popup window open at the same time. Try it… just open an Alert or some other modal popup with buttons or other form controls from a different modal popup also with form controls. Then try to use tab or enter to navigate the form in the topmost popup… that’s where the weirdness begins.

    Any ideas? Is it possible to debug magic?

Comments are closed.