功能描述：弹出一个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>