DIV CSS遮罩层

  1. 云栖社区>
  2. 博客>
  3. 正文

DIV CSS遮罩层

jefferyjob 2015-12-28 18:33:00 浏览784
展开阅读全文
<!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>

网友评论

登录后评论
0/500
评论
jefferyjob
+ 关注