Web页面Mask效果的实现

当提交web页面内容是，如果希望控制用户不乱点，往往加一个loading的页面，这个页面覆盖在原有的页面之上。实现这个效果，是用于JavaScript和CSS就可以做到。

1）在form的onsubmit的处理中，
在

document.createElement('div')下创建<div>

然后加到html中

document.body.appendChild(div)

;

2)

div.innerHtml = "你想表示的GUI内容";

3) 重点是设置这个Div对象的CSS样式
如下所示：

	div.style.top = '0px';
	div.style.left = '0px';
	div.style.zIndex = 10000;
	div.style.width = this.GetDocumentWidth() + 'px';
	div.style.height = this.GetDocumentHeight() + 'px';
	div.style.display = 'block';
	div.style.position = 'absolute';
	div.style.filter = "alpha(opacity:50)";
	div.style.KHTMLOpacity = 0.5;
	div.style.MozOpacity = 0.5;
	div.style.opacity = 0.5;
	div.style.background = '#ccc';

这样就可以了。


4）需要注意的问题，用户缩放浏览器窗口大小。
需要处理

window.onresize = function()

重新计算div的width和height

5） 当显示结束时调用

div.style.display = 'none';

这样就实现Mask效果了。