<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
#fdiv {
display: none; /* 默认隐藏 */
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
span {
background-color: #2D6A88;
height: 100px;
width: 800px;
display: block;
}
#fdiv-2 {
margin-top: 180px;
}
#fdiv-gb {
position: absolute;
top: 3px;
left: 760px;
float: right;
}
</style>
<button type="button" id="bt">打开弹窗</button>
<div id="fdiv">
<span id="fdiv-1">页头</span>
<div id="fdiv-gb">
关闭
</div>
<div id="zdiv">
页中
</div>
<span id="fdiv-2">页尾</span>
</div>
<script>
//点按钮打开弹窗
//点关闭关闭弹窗
var bt = document.getElementById('bt');
var wd = document.getElementById('fdiv');
var gb = document.getElementById('fdiv-gb');
bt.onclick=function(){
wd.style.display='block';
}
gb.onclick=function(){
wd.style.display='none';
}
</script>
</body>
</html>