<!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" />
<title>Document</title>
<script src="../bootstrap/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.tanchuang{
500px;
height: 500px;
background: green;
display: none;
position: absolute;
}
.close{
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>
<button>弹窗</button>
<div class="tanchuang">
<div class="close">X</div>
</div>
</body>
</html>
<script type="text/javascript">
huoqu();
// show:显示元素
$("button").click(function(){
$(".tanchuang").show();
});
// hide:隐藏元素
$(".close").click(function(){
$(".tanchuang").hide();
});
// 浏览器窗口的大小发生变化时触发resize事件
$(window).resize(function(){
huoqu();
});
// 滚动条滚动时触发scroll事件
$(window).scroll(function(){
huoqu();
});
function huoqu(){
// 用$(window).scrollTop()获取滚动条滚动和距离顶部的距离
var topp = $(window).scrollTop();
// 用$(window).width()获取浏览器窗口的宽度
var wid = $(window).width();
var wida = (wid-500)/2;
// 用$(window).height()获取浏览器窗口的高度
var hei = $(window).height();
var heia = (hei-500)/2;
$(".tanchuang").css("left",wida);
$(".tanchuang").css("top",heia + topp);
}
</script>