jQuery Mobile 弹出内容高度超过窗口高度

Question

jQuery Mobile popup 维度仅限于具有15px margin on the left an right sides, and a 30px margin on the top and bottom。如果内容对于这些限制而言太大，则弹出窗口会变长（而不是更宽），因此必须滚动整个页面才能查看弹出内容。

我需要改变这种行为，使弹出窗口的尺寸永远不会超过窗口的高度，并且内容可以在弹出窗口中垂直滚动。

因此可以限制弹出窗口的大小：

$('#popup').on({
  popupbeforeposition: function() {
    var maxHeight = $(window).height() - 30
    $('#popup').css('max-height', maxHeight + 'px')
  }
})

...但是弹窗内容是一样的，通过弹窗底部仍然强制用户滚动页面，而不是弹窗内的内容。

如何让弹出内容在弹出内容中垂直滚动？

Answer 1

你应该使用：

$('#popup').css('overflow-y', 'scroll');    

这是一个工作示例：http://jsfiddle.net/Gajotres/mmRnq/

结语

如果您想了解有关如何自定义 jQuery Mobile 页面和小部件的更多信息，请查看此 article。它附带了许多工作示例，包括为什么 !important 对于 jQuery Mobile 是必需的。