将div定位到可见区域的中心

2021/01/17 08:11 · jquery ·  · 0评论

我正在制作用于邮件列表注册的灯箱式弹出窗口,但是我希望该弹出窗口定位到可见页面的中心,而不仅仅是整个文档的中心。如果用户滚动到页面底部并单击以进行注册,则希望它出现在屏幕中央。

我假设jQuery / JS将是最好的方法。这是我当前的CSS代码,效果很好,但对于较小的屏幕,div需要动态向下推入可见空间。

.my-div{
    width:960px;
    height:540px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-480px;
    margin-top:-270px;
    z-index:60;
    display:none;
}

你近了!可以单独使用CSS来完成:

使用position: fixed代替position: absolute

固定是指视口,而绝对是指文档。阅读所有关于它的内容!

var w = $(window).width();
var h = $(window).height();
var d = document.getElementById('my-div');
var divW = $(d).width();
var divH = $(d).height();

d.style.position="absolute";
d.style.top = (h/2)-(divH/2)+"px";
d.style.left = (w/2)-(divW/2)+"px";

我知道这不会解决问题,但它是一个很好的参考和起点:如何将div放置在浏览器窗口的中心

将Div恰好定位在屏幕中央

<!DOCTYPE html> 
  <html > 
    <head> 
      <style type="text/css"> 
        .exactCenter { 
           width:200px; 
           height:200px; 
           position: fixed; 
           background-color: #00FF00; 
           top: 50%; 
           left: 50%; 
           margin-top: -100px; 
           margin-left: -100px; 
        } 
      </style> 
    </head> 
    <body> 
      <div class="exactCenter"> </div> 
    </body> 
  </html> 

JSFiddle在这里
这里

使用jQuery:

var left = ($(window).width() - $(.my-div).width()) / 2;
var top = ($(window).height() - $(.my-div).height()) / 2;
$('.my-div').position({top: top + 'px', left: left + 'px});

尽管公认的答案是最好的,但是如果您不能将设置divs positionfixed,则可以使用此纯JavaScript解决方案。

var myElement = document.getElementById('my-div'),
    pageWidth = window.innerWidth,
    pageHeight = window.innerHeight,
    myElementWidth = myElement.offsetWidth,
    myElementHeight = myElement.offsetHeight;

myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + "px";
myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + "px";

JSFiddle

或更简洁的版本:

var w = window,
    elem = document.getElementById('my-div');

elem.style.top = (w.innerHeight/2) - (elem.offsetHeight/2) + 'px';
elem.style.left = (w.innerWidth/2) - (elem.offsetWidth/2) + 'px';

此答案是Lahiru Ashan答案的原始JavaScript版本

本文地址:http://jquery.askforanswer.com/jiangdivdingweidaokejianquyudezhongxin.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!