close popUp when we click anywhere outside of popup – in modal part…

So, in previous example we have created a simple pupUp window that pops up when we click a button in our application (https://engineeringtheworld.wordpress.com/2009/11/23/how-to-create-a-popup-in-flex/). What if we would want to close the popUp anytime user clicks anywhere outside our popUp window.

We can do that by using FlexMouseEvent’s MOUSE_DOWN_OUTSIDE event which is dispatched when user clicks outside of our pupUp window. All we have to do to make this work is add a few lines of code in popUpWindow.mxml.

We first import the FlexMouseEvent with import mx.events.FlexMouseEvent;. We add init() function when our popUp is initialized (initialize=”init()” in VBox of our MXML).

In init() function we just add event listener to the component with this.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, closePopUp);. We have to create closePopUp function which will close our popUp.

private function closePopUp(event:FlexMouseEvent):void{
PopUpManager.removePopUp(this);
}

And that is all we have to do, to make our popUp dissapear when user clicks anywhere outside of popUp window. Below is the new popUpWindow.mxml source code.

Advertisements

, , ,

  1. #1 by Ravi on October 12, 2011 - 9:52 pm

    Thanks. It helped me.

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: