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