<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="text/javascript" src="../public/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../public/bootstrap.min.js"></script>
<title>Document</title>
<style type="text/css">
#tanchu{
300px;
height: 300px;
border-radius: 5px;
background-color: rgba(0,0,0,0.3);
position: absolute;
display: none;
}
.close{
width: 10px;
height: 10px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.close:hover{
cursor: pointer;
}
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<button>弹出</button>
<div id="tanchu">
<div class="close">X</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var screenwidth,screenheight,tcleft,tctop,scrolltop;
loadwz();
$("button").click(function(){
$("#tanchu").show();
})
$(".close").click(function(){
$("#tanchu").hide();
})
$(window).resize(function(){ //resize 对浏览器窗口调整大小进行计数
loadwz();
})
$(document).scroll(function(){ //scroll 对元素滚动的次数进行计数
loadwz();
})
})
function loadwz(){
screenwidth = $(window).width();
screenheight = $(window).height();
scrolltop = $(document).scrollTop(); //scrolltop 返回或者设置匹配元素的滚动条的垂直位置
tcleft = (screenwidth-300)/2;
tctop = (screenheight-300)/2;
$("#tanchu").css({"left":tcleft,"top":tctop+scrolltop});
}
</script>
点击“弹出”
并将弹窗位置与浏览器作比较，从而让弹窗始终保持在中间位置。