DIV CSS遮罩层

最新推荐文章于 2020-10-12 10:59:20 发布

落叶翩翩

最新推荐文章于 2020-10-12 10:59:20 发布

阅读量817

点赞数

分类专栏： java web开发

本文链接：https://blog.csdn.net/bolg_hero/article/details/21715471

版权

java web开发专栏收录该内容

237 篇文章 0 订阅

订阅专栏

代码示例如下：

<html>
<head>
	<meta charset="UTF-8">
	<title>DIV CSS遮罩层</title>
	<script language="javascript" type="text/javascript">
		function showdiv() {            
                            var x= $('body').height();
                            $('#bg').css("height",x+"px");
		            document.getElementById("bg").style.display ="block";
		            document.getElementById("show").style.display ="block";
		        }
		function hidediv() {
		            document.getElementById("bg").style.display ='none';
		            document.getElementById("show").style.display ='none';
		        }
	</script>
</head>
<body>
	<input id="btnshow" type="button" value="Show" οnclick="showdiv();"/>
	<div id="bg" style="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);"></div>
	<div id="show" style="display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;">
		测试
		<input id="btnclose" type="button" value="Close" οnclick="hidediv();"/>
	</div>
</body>
</html>

效果图：