改成
position:fixed!important;/* FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
2.js方法重新计算位置
$(function(){
$(window).scroll(function(){
//浏览器滚动条失效;
//$(window).scrollTop(0);
var offset = $(window).offset();
var position = $(window).position();
$("#div_pop").css("top",$(window).scrollTop()+$(window).outerHeight()/3);
//滚动条移动的高度+浏览器高度(计算外框)的三分之一
$("#div_back").css("height",
$(window).scrollTop()+$(window).outerHeight()); }) //背景层的大小高度,滚动条移动的高度+浏览器高度(计算外框)
$(function(){
$(window).scroll(function(){
//浏览器滚动条失效;
//$(window).scrollTop(0);
})
<script>
var firefox = navigator.userAgent.indexOf('Firefox') != -1;
function MouseWheel(e) {
///对img按下鼠标滚路，阻止视窗滚动
e = e || window.event;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
//其他代码
}
window.onload = function () {
var img = document.getElementById('img');
firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : (img.onmousewheel = MouseWheel);
}
</script><div style="height:100px"></div>
<img src="http://avatar.profile.csdn.net/C/5/A/1_px372265205.jpg" id="img" style="width:200px"/>
<div style="height:1000px"></div>
<!DOCTYPE html>
<html>
<head>
<title>jQuery弹出框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.div_back{
display:none;
position:fixed;
z-index:9998;
top:0;
left:0;
width: 100%;
height: 100%;
background-color:#666666;
opacity:0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
.div_pop{
display:none;
position:fixed;
z-index:9999;
background-color:#eafcd5;
top:30%;
left:42%;
width:200px;
height:80px;
padding:2px;
border-radius:10px;
box-shadow: 0 0 10px #666;
border:2px solid #666666;
}
.div_info{
position:absolute;
padding:10px;
}
.div_info_font{
position:absolute;
width:120px;
left:80px;
top:20px;
}
.div_title{
font-size:20px;
padding:2px;
background-color:#978987;
}
.div_close{
position:absolute;
right:5px;
}
.div_img{
height:40px;
width:40px;
left:20px;
position:absolute;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function fnClose(){
$("#div_back").hide();
$("#div_pop").hide();
}
function fnOpen(){
$("#div_back").show();
$("#div_pop").show();
}
</script>
</head>
<body>
<div id="div_back" class="div_back">
</div>
<div id="div_pop" class="div_pop" >
<div id="div_title" class="div_title">提示:
<a id="close" href="javascript:fnClose()" class="div_close">关闭</a>
</div>
<div id="div_info" class="div_info">
<img src="image/load.gif" class="div_img"/><div class="div_info_font">正在加载中...</div></div>
</div>
<p align="center">
<input type="button" value="打开" onClick="fnOpen()"/>
</p>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
</body>
</html>
原文：http://blog.csdn.net/w5167839/article/details/40743837