FLEX 3.0でポップアップを作成

Question

キャンバスを拡張するカスタムコンポーネントであるポップアップを作成しました。キャンバスの外観がイメージに表示されているのと似ています。それに似たようなポップアップを作成する方法はありますか？

ここで私はあなたに私が今まで行っているサンプルコードを与えている...

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="550" height="350" backgroundAlpha="0"> 
<mx:Script> 
    <![CDATA[ 
     import mx.managers.PopUpManager; 

     public function btnImage_click():void 
     { 
      PopUpManager.removePopUp(this); 
     } 

    ]]> 
</mx:Script> 
<mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" /> 
<mx:Fade id="fadeIn" duration="700" alphaFrom="0.0" alphaTo="1.0"/> 
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle"> 
    <mx:Canvas height="85%" width="90%" backgroundColor="#ffffff" backgroundAlpha="1" > 
     <mx:VBox height="100%" width="100%"> 
      <mx:HBox height="70%" width="100%" horizontalAlign="center" verticalAlign="middle"> 
       <mx:Image id="btnPrevious" source="Images/previous.png" 
        click="{vsSubImages.selectedIndex--}" enabled="{vsSubImages.selectedIndex!=0}"/> 
       <mx:ViewStack height="100%" width="90%" creationPolicy="all" id="vsSubImages"> 
        <mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}"> 
         <mx:Image id="img1" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />  
        </mx:VBox>     
        <mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}"> 
         <mx:Image id="img2" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />  
        </mx:VBox>     
        <mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}"> 
         <mx:Image id="img3" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />  
        </mx:VBox>     
       </mx:ViewStack> 
       <mx:Image id="btnNext" source="Images/next.png" 
        click="{vsSubImages.selectedIndex++}" enabled="{vsSubImages.selectedIndex!=2}" /> 
      </mx:HBox> 
      <mx:Box height="30%" width="100%" horizontalAlign="right" verticalAlign="top"> 
       <mx:Form height="100%" width="100%"> 
        <mx:FormItem label="Project Name : " > 
         <mx:Label id="lblName" /> 
        </mx:FormItem> 
        <mx:FormItem label="Description : " > 
         <mx:Label id="lblDescription" /> 
        </mx:FormItem> 
        <mx:FormItem label="Technology Name : " > 
         <mx:Label id="lblTechnology" /> 
        </mx:FormItem> 
       </mx:Form> 
      </mx:Box> 
     </mx:VBox> 
    </mx:Canvas> 
</mx:VBox> 
</mx:Canvas> 

主なアイデアは、現在、私はそのキャンバスの後ろに取得していますキャンバス上の閉じるボタンを表示することです。 私を助けてください。

Answer 1

最後の</mx:Canvas>タグの前にコードの一番下に<mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" />タグを入れてください。最後のように動作するキャンバスはZ-インデックスの一番上にあるためです。