javascript - 如何为放大的移动设备居中模态

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 时，这适用于桌面和移动设备。然而，一旦用户放大屏幕的一部分并调用此函数，它就会计算出错误的位置，并且模态框不会在用户的视口(viewport)中停留很长时间。

有没有一种方法可以让这个功能在移动设备上工作，尽管有缩放功能？或者，我很高兴我检测到一个移动设备，然后只在视口(viewport)的缩放部分显示模态，这样至少用户看起来模态弹出。

我被困住了，可以帮忙解决吗..

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

希望这对您有所帮助。