在Flex中居中显示Alert

一般情况下,发布Flex应用时swf的宽高都是100%,页面没有滑条,这时Alert弹出时是居中显示的。但如果swf的尺寸大于页面窗口尺寸而使用页面滑条而非Flex滑条,Alert弹出时是不会居中的。怎么解决这个问题呢?

因为涉及页面窗口,所以单靠Flex是不行的,得用Javascript获取当前页面窗口大小和对象边界与窗口中目前可见内容的最左端、最上端之间的距离。如下面JS:

function getWin()
{
    var winWidth = 0, winHeight = 0;
    var xOffset = 0, yOffset = 0;
    //Netscape compliant
    if( typeof( window.pageYOffset ) == "number" && typeof( window.innerWidth ) == "number") 
    {
        winWidth = window.innerWidth;
        winHeight = window.innerHeight;
        xOffset = window.pageXOffset;
        yOffset = window.pageYOffset;
    } 
    //DOM compliant
    else if( document.body 
        && ( document.body.scrollLeft || document.body.scrollTop ) 
        && ( document.body.clientWidth || document.body.clientHeight) ) 
    {
        winWidth = document.body.clientWidth;
        winHeight = document.body.clientHeight;
        xOffset = document.body.scrollLeft;
        yOffset = document.body.scrollTop;
    }
    //IE6 standards compliant mode
    else if( document.documentElement
        && ( document.documentElement.clientWidth || document.documentElement.clientHeight )
        && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) )
    {
        winWidth = document.documentElement.clientWidth;
        winHeight = document.documentElement.clientHeight;
        xOffset = document.documentElement.scrollLeft;
        yOffset = document.documentElement.scrollTop;
    }
    return [winWidth, winHeight, xOffset, yOffset];
}

传回的是个数组,然后我们再在Flex中使用ExternalInterface.call取得前页面窗口大小及拖动滑条之后的偏移距离。

点击此处查看该实例的效果,点击此处下载该实例的源码。

感兴趣的话可以测试一下:拖动页面滑条,点击click按钮,在不同的浏览器中不同大小的窗口下Alert始终是居中显示的。

注意:

1. 考虑到Javascript对浏览器的兼容性,我们在代码中作了不少判断;

2. 因为Alert是个静态类,我们不得不重写了该类,对Alert位置的调整是通过覆写updateDisplayList方法完成的;

3. 如果swf只是整个页面的一部分,要让Flex Alert居中是不可能的。只能在页面中通过Javascript来弹出alert窗口,因为Flex中的Alert是无法位于页面的最上层的。

最后,祝大家圣诞快乐!

发表评论