javascript - jQuery 自动将 div 定位在屏幕中心

Question

我有这个 jQuery 函数:

    $(window).resize(function(){
  $('#modal').css({
    left: ($(window).width() - $('#modal').outerWidth())/2,
    top: ($(window).height() - $('#modal').outerHeight())/2
  });
});

这就是我需要做的:“在调整窗口大小时将 div 放在屏幕中央”。唯一的问题是，当我将窗口缩小到足够大(400-500px)或从低分辨率设备(手机)访问网页时，标题会超出边界，你再也看不到了。

为什么会发生这种情况以及如何避免这种情况？

Answer 1

你可以只添加一个小测试:

$(window).resize(function(){
  var topPos = ($(window).height() - $('#modal').outerHeight())/2;

  $('#modal').css({
    left: ($(window).width() - $('#modal').outerWidth())/2,
    top: topPos > 0 ? topPos : 0
  });
});