小道仙的后宫

快节奏,慢生活。

jq完成弹出一个div,浮在其他内容之上,并且后面不可点击

功能描述:弹出一个div层,悬浮在其它的内容之上。除了这个悬浮的div,其它div不可以操作,直到关闭这个div。

一、图片展示效果

1、初始样子
2、点击 按钮 之后效果

3、点击关闭按钮(X)之后的效果

二、代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击弹出一个div</title>
	</head>
	<style>
		*{		
			margin: 0px;
		}
		#content{
			border: 1px red solid;
			width: 800px;
			height: 500px;
			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_div{
			background-color:rgba(220,220,220,0.5);
			position: absolute;
		}
	</style>
	<!--引入自定义的jqery-->
	<script type="text/javascript" src="jquery/jquery-1.8.3.js" ></script>
	<script>
		$(function(){  //页面加载完毕事件
			//获取页面的实际高度和宽度
			var hei = $(document).height();
			var wid = $(document).width();
			
//			点击弹出一个div框
			$("#button").click(function(){ //给按钮绑定点击事件
				$("#background_div").css("width",wid);
				$("#background_div").css("height",hei);
				$("#eject").show();
			});
			
//			点击关闭这个div框
			$("#close").click(function(){				
				$("#background_div").css("width",0);
				$("#background_div").css("height",0);
				$("#eject").hide();			
			});
//			鼠标移动到关闭按钮,按钮变红色,移除变黑色
			$("#close").mouseover(function(){
				$("#close span").css("color","red");
				$("#close span").css("cursor","default");
			});
			$("#close").mouseout(function(){
				$("#close span").css("color","black");
			});
			
		});
	
	</script>
	<body>
		<div id="main" style="position: relative;">
			<div id="background_div" >	
				
			</div>
			<div id="content" >
				这里是主内容区				
			</div>			
			<input style="display: block;" id="button" type="button" value="点击弹出div"/>
		</div>
		
			
		<div id="eject">
			<!--做一个点击关闭的按钮-->
			<div id="close" style="width: 20px;height: 25px; margin-left: 275px;">
				<span style="font-size: 25px;">X</span>
			</div>
			
			<!--弹出div的内容-->
			<div style="margin: auto; width: 120px; height: 20px;margin-top: 100px;">
				我是弹出的div				
			</div>			
		</div>
	</body>
</html>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Tomwildboar/article/details/80347855
个人分类: JQuery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

jq完成弹出一个div,浮在其他内容之上,并且后面不可点击

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭