功能描述：彈出一個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>