Close PopUps, TitleWindow, Panel etc by clicking the modal in Flex

I got one query, how to close Popups ( TitleWindow, Panel etc. ) just by clicking on Modal.

A functionality which we found in HTML / Javascript based modal (with lightbox ), some thing we can see now a days in Yahoo Mails, when we see images attached in our mails.

See, Modal is actually a FlexSprite instance in Flex frame work (same as well for AIR ). The Modal is created by SystemManager in Flex.

So, if we want to just close ( or to perform any business logic ), it is very easy, just listen for an Event.

The event is : ‘ mouseDownOutside ‘ .
A simple example is as below…
There are two files : 1) ModalTitleWindow.mxml 2) ModalClose.mxml

<!--  ModalTitleWindow.mxml -->

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

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="absolute" width="400" height="300" showCloseButton="true"
      close="PopUpManager.removePopUp(this)"
      mouseDownOutside="PopUpManager.removePopUp(this)">

<mx:Script>
  <![CDATA[
           import mx.managers.PopUpManager;
  ]]>
</mx:Script>
            <mx:Text text="Click, on Modal to close this PopUp."  />
</mx:TitleWindow>

<!--
    Now Main Application File
    ModalClose.mxml
-->

<mx:Application
   xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute"
   backgroundGradientColors="{[0xabcdef, 0x123456]}"
   xmlns:tempAlert="tempAlert.*"
   creationComplete="onCreationComplete()">

<mx:Script>

  <![CDATA[
       import mx.managers.PopUpManager;
      private function onCreationComplete():void
     {
        PopUpManager.centerPopUp(PopUpManager.createPopUp(this,ModalTitleWindow,false));
     }
  ]]>

</mx:Script>

</mx:Application>

This same even useful for AIR, too.

Due to this kind of ease, I really love Actionscript 3.
Try this and fell free to know me your comments.

Enjoy Flexing . . .

Mayur Rami