<!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 src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
<style type="text/css">
#tanchu{
width: 300px;
height: 300px;
border-radius: 5px;
background: 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 />
<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 />
<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,tclleft,tctop,scrolltop;
loadwz();
$("button").click(function(){
$("#tanchu").show();
})
$(".close").click(function(){
$("#tanchu").hide();
})
$(window).resize(function(){//对浏览器窗口调整大小进行计数：
loadwz();
})
$(document).scroll(function(){//对元素滚动的次数进行计数：
loadwz();
})
})
function loadwz(){
screenwidth = $(window).width();
screenheight = $(window).height();
scrolltop = $(document).scrollTop();//设置或返回被选元素的垂直滚动条位置。
tcleft = (screenwidth-300)/2;
tctop = (screenheight-300)/2;
$("#tanchu").css({"left":tcleft,"top":tctop+scrolltop});
}
//$(document) 是当前文档，就是你看到的整个网页
//$(window) 如果没有框架则就是你浏览的当前浏览器的窗口
</script>
原文：https://www.cnblogs.com/sunhao1987/p/9210539.html