Problem
TitleWindows, Panels and Alerts are all well and good, but clicking that little close button can be a pain. So now much like websites that popup larger imagery including a modal (with a lightbox), we can click that modal in Flex to close the Alert, PopUp etc.
Solution
The modal is created in the SystemManager in Flex. The modal is a FlexSprite and is given the name "modalWindow". By assigning a MouseEvent.CLICK handler to the SystemManager, we can check for those specific traits and close the window.
Detailed explanation
The problem is that clicking in the modal area of a popped up window does nothing (Alerts, Panels, TitleWindows, etc).
So by listening to the SystemManager, we can determine whether or not the modal area was clicked and do something based on that click; such as closing the popup.
Demo
There is a live demo here, with View Source enabled.
http://www.ichibod.com/flex/ModalClick/
Source
The source code is also very simple and displayed here.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.events.CloseEvent;
import mx.core.FlexSprite;
import mx.managers.SystemManager;
import mx.controls.Alert;
public var alertWindow:Alert;
public function popUpWindow(e:MouseEvent):void {
alertWindow = Alert.show("Click the modal area to close Alert box", "Modal Click Test", Alert.OK);
this.systemManager.addEventListener(MouseEvent.CLICK, modalClick);
}
protected function modalClick(e:MouseEvent):void {
if(e.target is FlexSprite) {
if(FlexSprite(e.target).name == "modalWindow") {
PopUpManager.removePopUp(alertWindow);
}
}
}
]]>
</mx:Script>
<mx:Button label="Click for Alert" click="popUpWindow(event)"/>
</mx:Application>
Hope that helps a few of you out there. Thanks!
