<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.popup{width: 300px;
height: 300px;
position: absolute;
border: 1px solid red;
}
#div1{
position: absolute;
top:0;
right: 0;
}
</style>
<script src="jquery-2.1.4.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
var odiv=$('<div class="popup">csq<div id="div1">X</div></div>');
$('body').append(odiv);
odiv.css('left',($(window).width()-odiv.outerWidth())/2);
odiv.css('top',($(window).height()-odiv.outerHeight())/2);
$(window).on('resize scroll',function(){
odiv.css('left',($(window).width()-odiv.outerWidth())/2);
odiv.css('top',($(window).height()-odiv.outerHeight())/2 + $(window).scrollTop());
});
$('#div1').click(function(){
odiv.remove();
})
})
});
/*
1.布局写样式
2.往body里添加弹窗
3.设置弹窗位置
4.关闭弹窗
*/
</script>
</head>
<body style="height:1500px">
<input type="button" value="点击" id="btn1">
<!-- <div class="popup">
csq
</div> -->
</body>
</html>