如何为放大的移动设备居中模式

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()
     });
  }

当没有对屏幕应用缩放时，这适用于桌面和移动设备。但是，一旦用户放大屏幕的一部分并调用此函数，它就会计算错误的位置，并且模态在用户的视口中并不长。

有没有办法让这个功能在移动设备上工作，尽管缩放？或者，我很高兴我检测到了移动设备，然后只在视口的缩放部分显示模态，这样至少用户似乎弹出了模态。

在我遇到困难时可以提供任何帮助吗..

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;
}

希望这会有所帮助。