jQuery弹出层始终垂直居中，相对于屏幕，相对于当前窗口

最新推荐文章于 2019-11-12 11:00:09 发布

jiuqijack

最新推荐文章于 2019-11-12 11:00:09 发布

阅读量502

点赞数

分类专栏： --js-- 文章标签：弹框

--js-- 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

弹出层永远是一个前端必须搞定的东西，一般情况下，如果弹出层有固定的高和宽，用样式即可搞定，但是如果碰到没有固定高或者固定宽或者固定高和宽的时候，我们就需要用JS去处理，去动态获取当前窗口高或者宽；今天弄了2种情况，一个是相对于屏幕窗体，一个是相对于当前的窗口，看代码，或许对你有用：

[html]view plain copy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>无标题文档</title>  
 <style>  
 body{margin:0px;padding:0px}  
 #div1{background:#F00;color: #FFF; display:none;position:absolute;}  
 #div2{background:#333333;color: #FFF;width:400px;display:none; position:absolute;}  
 </style>  
 <Script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>  
 //浏览器窗口垂直居中  
 <!--  
 <Script type="text/javascript">  
 function popup(popupName){  
     var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度  
     _windowHeight = $(window).height(),//获取当前窗口高度  
     _windowWidth = $(window).width(),//获取当前窗口宽度  
     _popupHeight = popupName.height(),//获取弹出层高度  
     _popupWeight = popupName.width();//获取弹出层宽度  
     _posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight;  
     _posiLeft = (_windowWidth - _popupWeight)/2;  
     popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position  
 }  
 $(function(){  
     $(".btn1").click(function(){  
         popup($("#div1"));  
     });  
     $(".btn2").click(function(){  
         popup($("#div2"));  
     });  
 });  
 </script>   
 -->  
   
 //当前窗口垂直居中  
 <Script type="text/javascript">  
 function popup(popupName){    
     _windowHeight = $(".wrap").height(),//获取当前窗口高度  
     _windowWidth = $(".wrap").width(),//获取当前窗口宽度  
     _popupHeight = popupName.height(),//获取弹出层高度  
     _popupWeight = popupName.width();//获取弹出层宽度  
     _posiTop = (_windowHeight - _popupHeight)/2;  
     _posiLeft = (_windowWidth - _popupWeight)/2;  
     popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position  
 }  
 $(function(){  
     $(".btn1").click(function(){  
         popup($("#div1"));  
     });  
     $(".btn2").click(function(){  
         popup($("#div2"));  
     });  
 });  
   
 $(window).resize();   
   
   
  </script>  
 </head>  
   
 <body >  
   
 <div >  
 <input class="btn1" type="button" value="1"/></div>  
 <input class="btn2" type="button" value="2"/></div>  
   
 <div style="width:500px;  background:#ccc; position:relative; top:100px; left:200px;" class="wrap">  
 我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊  
 <br>我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊  
 <div id="div1">我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊</div>  
 <div id="div2">我是弹出窗口2222啊<br>我是弹出窗口2222啊<br>我是弹出窗口2222啊<br>我是弹出窗口2222啊<br>我是弹出窗口2222啊</div>  
 </div>  
   
   
   
 </body>  
 </html> 
 转自：http://blog.csdn.net/congcong875/article/details/8747625

jiuqijack

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery弹出层始终垂直居中，相对于屏幕，相对于当前窗口

弹出层永远是一个前端必须搞定的东西，一般情况下，如果弹出层有固定的高和宽，用样式即可搞定，但是如果碰到没有固定高或者固定宽或者固定高和宽的时候，我们就需要用JS去处理，去动态获取当前窗口高或者宽；今天弄了2种情况，一个是相对于屏幕窗体，一个是相对于当前的窗口，看代码，或许对你有用：[html] view plain copy> html
复制链接

扫一扫