<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/18/using-the-image-control-as-a-pop-up/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Style>
        global {
            modalTransparencyBlur: 0;
            modalTransparency: 0.9;
            modalTransparencyColor: black;
            modalTransparencyDuration: 500;
        }
    </mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import mx.managers.PopUpManager;

			private const IMG_PREFIX:String = "http://www.helpexamples.com/flash/images/";

			private function popIt(src:String):void {
				var img:Image = new Image();
				img.addEventListener(MouseEvent.CLICK, img_click);
				img.addEventListener(Event.COMPLETE, img_complete);
				img.load(IMG_PREFIX + src);
				img.toolTip = img.source.toString();
				PopUpManager.addPopUp(img, this, true);
			}

			private function img_complete(evt:Event):void {
				var img:Image = evt.currentTarget as Image;
				img.width = img.contentWidth;
				img.height = img.contentHeight;
				PopUpManager.centerPopUp(img);
			}

			private function img_click(evt:MouseEvent):void {
				var img:Image = evt.currentTarget as Image;
				PopUpManager.removePopUp(img);
			}
		]]>
	</mx:Script>

	<mx:ApplicationControlBar dock="true">
		<mx:Button label="image 1" click="popIt('image1.jpg');" />
		<mx:Button label="image 2" click="popIt('image2.jpg');" />
		<mx:Button label="image 3" click="popIt('image3.jpg');" />
	</mx:ApplicationControlBar>

</mx:Application>