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效果了。
页:
[1]