Web页面Mask效果的实现

最新推荐文章于 2024-06-20 23:28:37 发布

最新推荐文章于 2024-06-20 23:28:37 发布 · 600 阅读

文章标签：

#Web #CSS #JavaScript #浏览器 #HTML #ViewUI

web 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS创建网页加载遮罩的方法。通过在表单提交时添加一个覆盖原有页面的div元素，并设置特定的CSS样式，可以达到防止用户误操作的效果。文章还讨论了窗口尺寸变化时的处理方案。

当提交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';