首页 文章

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

提问于
浏览 次
0

我有一个模态，用于使模态居中的以下函数：

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应用于屏幕时，这适用于桌面和移动设备 . 但是，只要用户放大屏幕的一部分并调用此函数，它就会计算错误的位置，并且用户的视口中的模态不会很长 .

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

因为我被卡住了，可以对此有任何帮助..

javascript jquery html css mobile

1 回答

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

    希望这可以帮助 .

    回复于

相关问题