首页 > 代码库 > jQuery 弹出窗口一直居中详细案例
jQuery 弹出窗口一直居中详细案例
在网上查了 很多 不是不符合就是效果不好;于是自己总结一番,解决此问题
原理:
常见问题:
弹出层居中了,背景也是半透明的
但是发现一拉动滚动条马上就露馅了发现背景只设置了屏幕所在段,其他部分都是原来的样子,而且弹出层因为滚动条移动不见了 这是网上大部分弹出层出现的普遍问题
问题解决办法,有三种
1.利用IE6的漏洞,_top和使用css expresstion表达式
优点:不会抖动,通过计算得出位置,大部分浏览器都可以使用
缺点:不推荐使用css expresstion因为在做任何事件时css expression都会调用js方法重新计算结果,随便都有1000次/秒,当页面元素很多渲染效果就很很差
背景层,弹出层的样式将 position:fixed;
改成
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()); }) //背景层的大小高度,滚动条移动的高度+浏览器高度(计算外框)
优点
解决了css expression的大量元素渲染慢的问题
缺点
chrome没有问题,IE中会抖动因为移动滚动条时计算高度,延时导致弹窗抖动(效果十分不友好)
3.固定滚动条 让弹出层一直居中
利用滚动条事件固定滚动条一直为0
$(function(){$(window).scroll(function(){ //浏览器滚动条失效; //$(window).scrollTop(0);}) 优点:jQuery的scorll方法兼容大部分浏览器重要的是同时屏蔽onkeypress上下导致的滚动条移动
再讲讲js的锁定滚动条
可以参照
<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 = http://www.mamicode.com/false; >
滚动条事件onmousewhell IEDOMMousescroll FF具体说明看这个链接javascript鼠标滚轮滚动事件
但是这个方法用onkeypress 上下键 就会失效如果想完善可以加上对上下键的监控而下面的方法直接使用position:fixed相对于浏览器偏移解决了上面的所有问题但是注意下面3点:1.<!DOCTYPE html>一定要写,设置浏览器对html的解析版本 具体分析可以看讲解这个的blog2. 设置一个背景透明的图层z-index:9998; //图层设置opacity:0.5; //IE6的透明filter: alpha(opacity=50); //IE6以上的透明-moz-opacity: 0.5; //firefox透明3.设置一个弹出层z-index:9998; //图层设置弹出层,背景层的position都要是fixed3.点击按钮就显示,否则隐藏.<!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>
jQuery 弹出窗口一直居中详细案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。