简单遮罩效果

最新推荐文章于 2020-12-07 21:36:43 发布

tank2140896

最新推荐文章于 2020-12-07 21:36:43 发布

阅读量252

点赞数

分类专栏：前端开发文章标签： html css

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏


<html>
<head>
<script>
function test(){
	document.getElementById("beyond_cover").style.display = "none";
};

function clickFunction(){

	//遮罩div关键代码
	//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓关键在这里↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
	//absolute有时只作用于一屏，如有滚动条就会超出作用范围，建议用fixed
    document.getElementById("cover").style.position = "absolute";
	document.getElementById("cover").style.width = "100%";
	document.getElementById("cover").style.height = "100%";
	document.getElementById("cover").style.top = "0px"; 
    document.getElementById("cover").style.left = "0px";
	document.getElementById("cover").style.zIndex = "1";//z-index="1";
	//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑关键在这里↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
	//遮罩div可选代码(还可添加其他)
	document.getElementById("cover").style.opacity = "0.2";
    document.getElementById("cover").style.backgroundColor = "rgb(0,0,0)";

	//额外扩展显示的内容,层级比遮罩层高
    //absolute有时只作用于一屏，如有滚动条就会超出作用范围，建议用fixed
	document.getElementById("beyond_cover").style.position = "absolute";
	document.getElementById("beyond_cover").style.top = "30%";
	document.getElementById("beyond_cover").style.left = "30%";
	document.getElementById("beyond_cover").style.display = "block";
	document.getElementById("beyond_cover").style.width = "45%";
	document.getElementById("beyond_cover").style.height = "20%";
	document.getElementById("beyond_cover").style.backgroundColor = "orange";
	document.getElementById("beyond_cover").style.zIndex = "2";//z-index="2";


};
</script>
</head>
<body onload="test()">

<div><input type="text"/></div><div>1</div>
<div><input type="text"/></div><div>1+1=2</div>
<div><input type="text"/></div><div>1+1=2;1+2=3</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5;1+5=6</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5;1+5=6;1+6=7</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5;1+5=6;1+6=7;1+7=8</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5;1+5=6;1+6=7;1+7=8;1+8=9</div>

<div><button onclick="clickFunction()">click me</button></div>

<!-- 创建一个用于遮罩的div -->
<div id='cover'></div>


<div id='beyond_cover' align='center'>
<h1>我是建立于遮罩效果之上的自定义内容</h1>
<h1>因此我的z-index要比遮罩层的z-index大</h1>
</div>

</body>
</html>

tank2140896

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单遮罩效果

[code="html"]function test(){ document.getElementById("beyond_cover").style.display = "none";};function clickFunction(){ //遮罩div关键代码 //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓关键在这里↓↓↓↓↓↓↓↓↓↓↓↓↓↓...
复制链接

扫一扫

专栏目录