jQuery 弹出窗口一直居中详细案例
改成
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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。