在网页中根据控件弹出悬浮在网页的隐藏div(弹出后，网页不可操作)

最新推荐文章于 2023-10-16 17:20:06 发布

悲殤乀述裞微笑ing

最新推荐文章于 2023-10-16 17:20:06 发布

阅读量528

点赞数

分类专栏： HTML+CSS 文章标签： jquery css html

本文链接：https://blog.csdn.net/java_learneryy/article/details/106398720

版权

HTML+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果说明：点击按钮，弹出悬浮于整个网页的div，div弹出之后，背景透明，颜色变化，且不可对网页的内容进行操作。

实现效果：

实现方式

由于使用jQuery控制div显示与隐藏，因此首先导入jQuery的包

使用display来控制div显示和隐藏的状态，

使用position属性控制div定位

具体实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击弹出一个div</title>
	</head>
	<style>
		*{		
			margin: 0px;
		}
		#content{
			border: 1px red solid;
			width: 150px;
			height: 70px;
			margin: auto;		
		}
		#button{
			margin: auto;
			margin-top: 10px;	
		}
		/*被弹出的div*/
		#eject{
			border: 1px blue solid;
			border-radius: 10px;
			width: 300px;
			height: 300px;
			/*让其浮在最上面*/
			position: absolute;
			display: none;
			/*设置弹出的div窗口位置*/   
			left: 40%;
			top: 30%;	
			background-color: white;
		}		
		/*弹出窗口后，背部不可点击操作*/
		#background{
			background-color:rgba(220,220,220,0.5);
			position: absolute;
		}
	</style>
	<!--引入自定义的jqery-->
	<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
	<script>
		$(function(){  //页面加载完毕事件
			//获取页面的实际高度和宽度
			var hei = $(document).height();
			var wid = $(document).width();
//			点击弹出一个div框
			$("#button").click(function(){ //给按钮绑定点击事件
				$("#background").css("width",wid);
				$("#background").css("height",hei);
				$("#eject").show();
			});
//			点击关闭这个div框
			$("#close").click(function(){				
				$("#background").css("width",0);
				$("#background").css("height",0);
				$("#eject").hide();			
			});

		});
	</script>
	<body>
		<div id="main" style="position: relative;">
			<div id="background" >	
			</div>
			<div id="content" >
				背景区域				
			</div>			
			<input style="display: block;" id="button" type="button" value="控制按钮"/>
		</div>
		<div id="eject" >
			<!--做一个点击关闭的按钮-->
			<div id="close" style="cursor: pointer;width: 16px;height: 16px; margin-left: 275px;background-image: url(img/close.png);">
				<!--<span style="font-size: 20px;">X</span>-->
			</div>
			<!--弹出div的内容-->
			<div style="margin: auto; width: 120px; height: 20px;margin-top: 100px;">
				弹出的div框				
			</div>			
		</div>
	</body>
</html>

代码可直接运行，注意导包。