HTML css+js实现遮罩层

最新推荐文章于 2024-01-29 16:43:03 发布

刘鸿宇..

最新推荐文章于 2024-01-29 16:43:03 发布

阅读量223

点赞数

分类专栏：前端文章标签： css javascript

本文链接：https://blog.csdn.net/m0_53911539/article/details/111648955

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#big
			{
					width: 100%;
					height: 700px;
					background: url(img/pdx_big.jpeg)  no-repeat;
			}
			#zzc
			{
				width: 100%;
				height: 700px;
				background-color: aqua;
				position: absolute;
				top: 10px;
				left: 0px;
				opacity: 0.5;
				display: none;
			}
			#center
			{
				width: 200px;
				height: 200px;
				background: url(img/pdx.png);
				position: absolute;
				top: 200px;
				left: 600px;
			}
		</style>
		<script src="js/jquery-1.7.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#open").click(function(){
					$("#zzc").css("display","block")
				})
				$("#close").click(function(){
					$("#zzc").css("display","none")
				})
			})
		</script>
	</head>
	<body>
		<div id="big">
			<input type="button" id="open" value="打开遮罩层" />
		</div>
		<div id="zzc">
			<div id="center">
				<input  type="button" id="close" value="关闭遮罩层" />
			</div>
		</div>
	</body>
</html>

刘鸿宇..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
HTML css+js实现遮罩层

代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #big { width: 100%; height: 700px; background: url(img/pdx_big.jpeg) no-repeat; }
复制链接

扫一扫