<br><br><br><br>

<button>弹出</button>

<div id="tanchuang">

	<span id="close">×</span>

</div>

<br><br><br>

$(function(){

	//定义页面宽度，页面高度，弹窗位置left，弹窗位置top，滚动条高度

	var screenWidth,screenHeight,tcleft,tctop,scrollTop;

	//计算弹窗位置的函数

	tanLocation();

	//按钮添加点击事件，调用方法show(),使弹窗div出现

	$('button').click(function(){

		$('#tanchuang').show();

	})

	//关闭按钮添加点击事件，调用方法hide(),使弹窗div消失

	$('#close').click(function(){

		$('#tanchuang').hide();

	})

	//窗口对象添加resize() 当浏览器窗口大小改变时执行。

	$(window).resize(function(){

		tanLocation();

	})

	//文档对象添加scroll() 当滚轮高度变化时执行

	$(document).scroll(function(){

		tanLocation();

	})

})

//计算弹窗位置的函数

function tanLocation(){

	//获取页面宽度

	screenWidth = $(window).width();

	//获取页面高度

	screenHeight = $(window).height();

	//计算left值

	tcleft = (screenWidth-100)/2;

	//计算top值

	tctop = (screenHeight-100)/2;

	//获取滚轮高度

	scrollTop = $(document).scrollTop();

	//弹窗的位置样式改变

	$('#tanchuang').css({'top':tctop+scrollTop,'left':tcleft});

}