在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是无法位于页面的最上层的。

最后，祝大家圣诞快乐！

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: Control Class JavaScript
相关日志: