`
QuarterLifeForJava
  • 浏览: 176441 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

简单遮罩效果

htmlcss
阅读更多 
<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>
分享到：
| JavaScript及jQuery学习笔记(0)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics