DIV CSS遮罩层-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

DIV CSS遮罩层

简介: <!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> <
<!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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章