史上最简单遮罩实现

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

史上最简单遮罩实现

cometwo123 2015-12-04 17:07:00 浏览826
展开阅读全文
<!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" onclick="showdiv();"/>
<div id="bg"></div> 




<div id="show">测试
<input id="btnclose" type="button" value="Close" onclick="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" onclick="showdiv();" />
		
        <div id="bg" onclick="bgshow();"></div>
		<div id="show">测试
			<input id="btnclose" type="button" value="Close" onclick="hidediv();" />
		</div>
	</body>

</html>



   

                                                            

网友评论

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