DIV CSS遮罩层

最新推荐文章于 2023-10-01 16:52:41 发布

原创最新推荐文章于 2023-10-01 16:52:41 发布 · 773 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

web 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用DIV和CSS技术实现遮罩层的方法。通过设置不同元素的绝对定位和透明度，实现了页面上的遮罩效果及对话框功能，并利用jQuery控制其显示与隐藏状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV CSS遮罩层</title>
<meta charset='utf-8'/>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.min.js"></script>
<style type="text/css">
#background{ 
	display: none;  
	position: absolute;  
	top: 0%;  left: 0%;  
	width: 100%;  height: 100%;  
	background-color: black;  
	z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70); /*设置透明度*/
}
#show{
	display: none;  
	position: absolute;  
	top: 25%;  left: 22%;  
	width: 53%;  height: 49%;  
	padding: 8px;  
	border: 5px solid #E8E9F7;  
	background-color: white;  
	z-index:1002;  overflow: auto;
	border-radius: 15px; /*设置为圆角*/
}
</style>
</head>
<body>
	<input id="showdiv" type="button" value="显示遮罩层"/>

<!--遮罩层 start -->
	<div id="background"></div>
	<div id="show">测试文本<input id="hidediv" type="button" value="关闭"/></div>
<!--遮罩层 end -->

</body>
</html>
<script language="javascript" type="text/javascript">
//弹出遮罩层
$("#showdiv").click(function(){
	$("#background").show();
	$("#show").show();
});

//关闭遮罩层
$("#hidediv").click(function(){
	$("#background").hide();
	$("#show").hide();
});
</script>