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>
  <!&#91;CDATA&#91;
           import mx.managers.PopUpManager;
  &#93;&#93;>
</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="{&#91;0xabcdef, 0x123456&#93;}"
   xmlns:tempAlert="tempAlert.*"
   creationComplete="onCreationComplete()">

<mx:Script>

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

</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 šŸ™‚

Advertisements

6 Responses

  1. I think in line 35 is:

    PopUpManager.createPopUp(this,ModalTitleWindow,false);

    instead of

    PopUpManager.createPopUp(this,ModelClose,false);

    because ModalTitleWindow is the son of ModAlClose, what do you think?

    bye

  2. Thanks Armando.

  3. Thank you Mayur! This is exactly what I was looking for. šŸ™‚
    Greetings

  4. Excellent!! Solved my problem!

  5. http://www.codexamples.blogspo.com also have EJB Flex and xml code examples

  6. Hi,

    Can we show minnimize, maxmimize and resize button in titlewindow (flex 3) ..?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: