史上最简单遮罩实现

最新推荐文章于 2022-05-11 12:33:56 发布

最骚的就是你

最新推荐文章于 2022-05-11 12:33:56 发布

阅读量777

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/libin_1/article/details/50177355

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
 <html >
<head>
<title>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() {            
            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>
<style type="text/css">
        #bg{ display: none;  
		position: absolute; 
		top: 0%;  
		left: 0%;  
		width: 100%;  
		height: 100%;  
		background-color: black; 
		z-index:10;  
		-moz-opacity: 0.7;     //透明度
		opacity:0.7;  //透明度
	<!-- 	filter: alpha(opacity=70);} -->  //滤镜
		
        #show{display: none;  
		position: absolute; 
		top: 25%;  left: 20%;  
		width: 53%;  height: 49%; 
		padding: 38px;  
		border: 8px solid red; 
		background-color: yellow;
		z-index:1002;  overflow: auto;}
</style>
</head>
<body>
<div id="bg"></div> 
<input id="btnshow" type="button" value="Show" οnclick="showdiv();"/>
<div id="bg"></div> 




<div id="show">测试
<input id="btnclose" type="button" value="Close" οnclick="hidediv();"/>
</div>
</body>
</html>

点击遮罩关闭遮罩和弹出框：


<pre name="code" class="html"><!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>DIV CSS遮罩层</title>
		<script language="javascript" type="text/javascript">
			function showdiv() {
				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';
			}
			function bgshow() {               //点击遮罩关闭遮罩和弹出框：
				document.getElementById("bg").style.display = 'none';
				document.getElementById("show").style.display = 'none';
			}
		</script>
		<style type="text/css">
			#bg {
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 10;
				-moz-opacity: 0.7; //透明度
				opacity: 0.7; //透明度
				/*	filter: alpha(opacity=70);  //滤镜    */
			}
			
			#show {
				display: none;
				position: absolute;
				top: 25%;
				left: 20%;
				width: 53%;
				height: 49%;
				padding: 38px;
				border: 8px solid red;
				background-color: yellow;
				z-index: 1002;
				overflow: auto;
			}
		</style>
	</head>

	<body>
		
		<input id="btnshow" type="button" value="Show" οnclick="showdiv();" />
		
        <div id="bg" οnclick="bgshow();"></div>
		<div id="show">测试
			<input id="btnclose" type="button" value="Close" οnclick="hidediv();" />
		</div>
	</body>

</html>