如何使放大的移动设备居中模态

Question

我有一个模态，它可以将以下功能用于居中：

  center: function() {
     var top=Math.max($window.height() - $modal.outerHeight(),0) / 2;
     var left=Math.max($window.width() - $modal.outerWidth(),0) / 2;
     $modal.css({
        top: top + $window.scrollTop(),
        left: left + $window.scrollLeft()
     });
  }

当屏幕上没有Zoom时，对于台式机和移动设备来说，此功能正常。但是，一旦用户放大了屏幕的一部分，并且称为该功能会计算错误的位置，并且模态在用户的视口中不长。

尽管有变焦，是否有一种方法可以使此功能在移动设备上起作用？另外，我很高兴我检测到移动设备，然后在视口的缩放部分显示模式，因此至少用户似乎弹出了模态。

当我卡住时，可以为此提供任何帮助。

Answer 1

如果需要始终将模态始终集中在屏幕上，则可以单独使用CSS进行以下操作：

/* adjust height/width properties to whatever you need them to be */
.modal {
  bottom: 0;
  left: 0;
  margin: auto;
  max-height: 500px;
  max-width: 600px;
  min-width: 300px;
  position: fixed;
  right: 0;
  top: 0;
}

希望这会有所帮助。