一个简单的遮盖层

最新推荐文章于 2025-08-18 15:19:17 发布

最新推荐文章于 2025-08-18 15:19:17 发布 · 176 阅读

DOM 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用JavaScript创建页面遮罩层的方法，并在遮罩层上添加了一个提示框，用户可以点击该提示框来关闭遮罩层。代码实现了页面元素的透明度设置，并确保遮罩层能够覆盖整个屏幕。


.opacity{
filter:alpha(opacity=50);
-moz-opacity:0.5;  
opacity: 0.5; 
}

function Mask(){
	var fl = document.documentElement.style.overflow;
	document.documentElement.style.overflow = 'hidden';
	var el = document.createElement('div');
	el.id = 'maskDiv';
	el.className = 'opacity';
	el.style.cssText = 'position:absolute;background-color:#99CCFF;z-index:9999;top:0px;left:0px;'
	el.style.width = window.screen.availWidth + 'px';
	el.style.height = window.screen.availHeight + 'px';
	tip = document.createElement('div');
	tip.id = 'tipDiv'
	tip.innerHTML = '<div align="center" style="cursor:pointer;border:1px solid #000">单击关闭遮盖层</div>';
	tip.style.cssText = 'width:200px;height:200px;background-color:#fff;margin:100px auto';
	el.appendChild(tip)
	document.body.appendChild(el);
	tip.firstChild.onclick = function(){
		tip.firstChild.onclick = null;
		var el =document.getElementById('maskDiv');		
		document.body.removeChild(el);
		document.documentElement.style.overflow = fl;
	}
}