在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始终是居中显示的。

注意:

  • 考虑到Javascript对浏览器的兼容性,我们在代码中作了不少判断;
  • 因为Alert是个静态类,我们不得不重写了该类,对Alert位置的调整是通过覆写updateDisplayList方法完成的;
  • 如果swf只是整个页面的一部分,要让Flex Alert居中是不可能的。只能在页面中通过Javascript来弹出alert窗口,因为Flex中的Alert是无法位于页面的最上层的。

    最后,祝大家圣诞快乐 🙂

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注