SkinnablePopUpContainer Is Visually Blocked by StageWebView in Flex

Question

For some unknown reason, my popup AlertMsg is visually blocked by the StageWebView:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" xmlns:local="*"
               creationComplete="application1_creationCompleteHandler(event)"
               backgroundColor="#112233">
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.events.FlexEvent;

            public var webView:StageWebView = new StageWebView();

            public function StageWebViewExample():void
            {
                webView.stage = webContainer.stage;
//                webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
                webView.viewPort = new Rectangle( 100, 100, 500, 500 );
            }

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                webContainer.addEventListener(Event.ADDED_TO_STAGE, function(ee:Event):void {
                    StageWebViewExample();
                });
            }

            protected function btnTest_clickHandler(event:MouseEvent):void
            {
                webView.loadURL("http://www.example.com");
                new AlertMsg().open(FlexGlobals.topLevelApplication as DisplayObjectContainer, true);
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <fx:Component className="AlertMsg">
            <s:SkinnablePopUpContainer x="70" y="300">
                <s:TitleWindow title="My Message" close="close()">
                    <s:VGroup horizontalAlign="center" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%">
                        <s:Label text="My alert message text here..."/>
                        <s:Button label="OK" click="close()"/>
                    </s:VGroup>
                </s:TitleWindow>
            </s:SkinnablePopUpContainer>
        </fx:Component>
    </fx:Declarations>

    <s:Panel id="thePanel" title="Panel" backgroundColor="blue">
        <s:Button id="btnTest" label="Test"
                  click="btnTest_clickHandler(event)" />
        <s:BorderContainer id="webContainer" y="50" width="400" height="300" />
    </s:Panel>

</s:Application>

Any idea?

Answer 1

I absolutly agree with @www.Flextras.com, there is no another workaround than substitute WebView by its snapshot. There is a ready solution http://www.judahfrangipane.com/blog/2011/01/16/stagewebview-uicomponent/